黑马视频 （7/10）
JQuery
day04 Jquery
使用 JQuery 完成页面定时弹出广告（定时器）:
- setInterval clearInterval
- setTimeout clearTimeout
- 显示: img.style.display = "block"
- 隐藏: img.style.display = "none"
img 对象
- style属性: style对象
使用JQuery完成表格的隔行换色
获得所有的行
- table.rows[]
修改行的颜色
- row.bgColor ="red"
- row.style.backgroundColor = "black"
- row.style.background = "red"
- "background-color:red"
- "background : red"
使用 JQuery 完成复选框的全选效果
- checked 属性
如何获取所有复选框:
- document.getElementsByName get Elements By Name 数据库里面
使用JQuery完成省市联动效果
- JS中的数组: ["城市"]
- new Array()
DOM树操作:
- 创建节点: document.createElement
- 创建文本节点: document.createTextNode
- 添加节点: appendChild（）
使用JQuery完成下列列表左右选择
- select下拉列表
- multiple 允许多选
- ondblclick : 双击事件
- for 循环遍历,一边遍历一边移除出现的问题
使用JQuery完成表单的校验(扩展)，事件:
- 获得焦点事件: onfocus
- 失去焦点事件: onblur
- 按键抬起事件: onkeyup
- 鼠标移入: onmouseenter
- 鼠标移出: onmouseout
- JS 引入外部文件 : script
使用JQuery完成页面定时弹出广告， 当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
- 定时器: setTimeout
- 显示和隐藏: style.display = " block / none "
什么是 JQuery :
- jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（ 或 JavaScript 框架 ）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery 的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 CSS 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
- 写更少的代码,做更多的事情: write Less ,Do more
- 将我们页面的 JS 代码和 HTML 页面代码进行分离
JQ 中根据 ID 查找元素
全都是根据选择器去找的 #ID{} .类名{} $("#ID的名称")- JQ 和 JS 之间的转换
- JQ 对象,只能调用 JQ 的属性和方法
- JS 对象 只能调用 JS 的属性和方法
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了内容"
//将JS对象转成JQ对象
$(div).html("转成JQ对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了内容");
//将JQ对象转成JS对象来调用
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";
});
});JQ 的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
- 导入 JQ 相关的文件
- 文档加载完成事件: $ ( function ) : 页面初始化的操作: 绑定事件, 启动页面定时器
- 确定相关操作的事件
- 事件触发函数
- 函数里面再去操作相关的元素
- 显示和隐藏 img.style.display
【JQ中的动画效果】
show : 显示 hide : 隐藏 slideDown: slideUp: 向上滑动 fadeIn fadeOut animate : 自定义动画定时弹出广告
<script> //显示广告 function showAd(){ $("#img1").slideDown(2000); setTimeout("hideAd()",3000); } //隐藏广告 function hideAd(){ $("#img1").slideUp(2000); } $(function(){ setTimeout("showAd()",3000); }); </script>JQuery中的选择器，让我们能够更加精确找到我们要操作的元素 ，基本选择器：
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器分组：选择器1，选择器2: [ 选择器1,选择器2 ]
<script> //文档加载事件,页面初始化的操作 $(function(){ //初始化操作: 给按钮绑定事件 $("#btn1").click(function(){ $("#two").css("background-color","palegreen"); }); //找出mini类的所有元素 $("#btn2").click(function(){ $(".mini").css("background-color","palegreen"); }); $("#btn3").click(function(){ $("div").css("background-color","palegreen"); }); $("#btn4").click(function(){ $("*").css("background-color","palegreen"); }); /*选择器分组*/ //找出mini类 和 span元素 $("#btn5").click(function(){ $(".mini,span").css("background-color","palegreen"); }); }); </script>JQ中的层级选择器
- 子元素选择器: 选择器1 > 选择器2 , 找出来的是所有子节点 ，儿子
- 后代选择器: 选择器1 选择器2 ，找出来的是选择器1下面的所有选择器2
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>- JQ 中的基本过滤器
基本过滤器:
选择器:first : 找出的是第一个
:last 最后一个
:even 找出索引为偶数
:odd 找出奇数索引
:gt (index) : 大于索引 greaterr-than
:lt (index) 小于
:eq (index) 等于
<script>
$(function(){
/<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>JQ 中的属性选择器
// 选择器[href] : 单个属性 $(function(){ //找到有name属性的input $("#btn1").click(function(){ $("input[name]").attr("checked",true); }); $("#btn2").click(function(){ $("input[name='accept']").attr("checked",true); }); $("#btn3").click(function(){ $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true); }); });- JQ中的表单过滤器
:input 找出所有输入项: input textarea select
: text
: password - 表单对象属性:
找出 select 中被选中的那一项:
option:selected
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>使用JQ完成表格的隔行换色
$(function(){ //获得所有的行 : 元素选择器 $("tbody > tr:even").css("background-color","#CCCCCC"); //修改基数行 $("tbody > tr:odd").css("background-color","#FFF38F"); // $("tbody > tr").css("background-color","#FFF38F"); });- 使用JQuery完成表单的全选全不选功能
使用JQ完成省市联动效果， 添加节点 : appendChild (JS)
- append : 添加子元素到末尾
- appendTo : 给自己找一个爹,将自己添加到别人家里
- prepend : 在子元素前面添加
- after : 在自己的后面添加一个兄弟
$(function(){ $("#province").change(function(){ // alert(this.value); //得到城市信息 var cities = provinces[this.value]; //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象 var citySelect = $city.get(0) citySelect.options.length = 0;*/ $("#city").empty(); //采用JQ的方式清空 //遍历城市数据 $(cities).each(function(i,n){ $("#city").append("<option>"+n+"</option>"); }); }); });- 使用JQ完成下拉列表左右选择
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>- 总结：
常用函数:
属性prop() properties : 如果传入一个参数 就是获取
prop("src","../img/1.jpg"); : 设置图片路径
attr : 操作一些自定义的属性 <img abc='123' />
prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性
css() ; 修改css样式
addClass() : 添加一个 class 样式
removeClass() : 移除
blur : 绑定失去焦点
focus: 绑定获得焦点事件
click: 点击
dblclick： 双击
change：更改
append : 给自己添加儿子
appendTo : 把自己添加到别人家
prepend : 在自己子节点最前面添加子节点
after : 在自己后面添加一个兄弟
before: 在自己前面添加一个兄弟
$("数组对象").each(function(index,data))
$.each(arr,function(index,data))
使用JQ完成表单的校验
- trigger : 触发事件，但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为，输入框获得焦点
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()
- 首先给必填项,添加尾部添加一个小红点
- 获取用户输入的信息,做相应的校验
- 事件: 获得焦点, 失去焦点, 按键抬起
表单提交的事件
<!DOCTYPE html>
<meta charset="UTF-8"> <link rel="stylesheet" href="../css/style.css" /> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript">7 $(function(){ // 页面初始化 //必填添加小红点 $(".bitian").after("<font class='high'> *</font>"); // 必填绑定事件 $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){}); 失去焦点。获得焦点， $(".bitian").blur(function(){ //用户当前输入的值 //var value = this.value; 两种方式都可以得到当前值 var value = $(this).val(); //清空上一次的提示信息 $(this).parent().find(".formtips").remove(); //判断当前的值是哪一项输入的值 if($(this).is("#username")){ // 校验用户名： if(value.length < 6){ $(this).parent().append("<span class='formtips onError'>用户名太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>用户正确</span>"); } } if($(this).is("#password")){ //校验密码 if(value.length < 3){ $(this).parent().append("<span class='formtips onError'>密码太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>密码可用</span>"); } } //链式调用，自动校验 }).focus(function(){ $(this).triggerHandler("blur"); //触发上面定义的 blur 函数 }).keyup(function(){ $(this).triggerHandler("blur"); }); //给表单绑定提交事件 $("form").submit(function(){ //提交的时候，触发必填项的校验逻辑 $(".bitian").trigger("focus"); //判断错误信息是否包含0 var length = $(".onError").length ; if(length > 0){ return false ; }else return true; }); }); </script> <title></title>
<form action="表单校验.html" method="post"> <div> 用户名:<input type="text" class="bitian" id="username"/> </div> <div> 密码:<input type="password" class="bitian" id="password"/> </div> <div> 手机号:<input type="tel" /> </div> <div> <input type="submit" value="提交"/> </div> </form>
1 条评论
韵律感强烈，朗读时如音乐流淌。