什么是JQuery
jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。
核心理念：write less，do more
jQuery的引入
学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用script标签导入<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>
基本语法/对象获取
在js中document.getElementById("id");还有通过tagName等等获取对象
在jQuery中，jQuery(选择器)或者$(选择器)
在jQuery中，"jQuery == $"，区分大小写
jQuery中对象变量命名建议以$开头，便于区分。
比如通过id找到某个标签对象，var $demoId = $("$demoId");
jQuery中的注释和js中一样。
jQuery的基本操作
jQuery页面加载
$(document).ready(当页面加载完成时要执行的函数)，可以执行多次，且比js中的onload方法速度快。
更加简版的写法：$(当页面加载完成时要执行的函数)
js对象和jQuery对象相互转换
把jQuery对象（）转换成对象：q[0]或者$q.get(0)
js对象p转换成jQuery对象:$(p)
jQuery的基本选择器(重要)
ID选择器：$("#id名")
类选择器：$(".类名")
标签选择器：$(标签名)
jQuery的事件(重要)
直接调用jquery对象的方法进行绑定
点击事件是click()方法
域的内容改变事件是change()方法
bind(事件类型，函数),通过bind方法可以绑定诸多事件
jQuery的效果(一般)
显示隐藏
show(speed，callback)，显示
speed，速度
callback，表示显示后要进行的操作(回调)
hidden(speed，callback)，隐藏
toggle()，显示隐藏的切换开关
滑动
slideDown(speed，callback),滑动显示
slideUp(speed，callback)，滑动隐藏
slideToggle(speed，callback)，滑动进行显示隐藏的切换
淡入淡出
fadeIn(speed,callback),淡入
fadeOut(speed，callback)，淡出
fadeTo(speed,opacity,callback),由不透明变成指定的透明度：透明度由0-1表示
opacity：指定透明度
fadeToggle(speed，callback),切换淡入淡出
定时弹广告案例
<script type="text/javascript"> //当文档加载完毕的时候，开启一个定时器 /*$(function(){ setTimeout(function(){ //当文档加载完毕五秒后弹出广告 $("#divAd").show(4000,function(){ //这个回调函数是，当显示完毕的时候才执行 //显示4秒后隐藏 setTimeout(function(){ $("#divAd").hide(2000) },4000) }) },5000) })*/ //不使用匿名函数 //显示广告的方法 function showAd(){ $("#divAd").show(2000,function(){ //回调函数是显示完毕之后执行，要开启一个定时器来关闭广告 setTimeout("hideAd()",4000) }) } //隐藏广告的方法 function hideAd(){ $("#divAd").hide(2000) } //当文档加载完毕的时候，开启一个定时器 $(function(){ setTimeout("showAd()",5000) }) </script>
jQuery的其它选择器总结(了解)
学习这么多jQuery的选择器的目的是:更快、更方便地找到想找的标签
层级选择器
$("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签(祖孙关系)
$("A>B"):获取A元素下面的所有B子元素。（父子关系）
$("A+B"):获取A元素同级的一个B元素。（兄弟）
$("A~B"):获取A元素同级的所有B元素。（兄弟们）
基本过滤选择器
$("选择器:first"),表示找到所有符合该选择器的第一个元素。
$("选择器:last"),表示找到所有符合该选择器的最后一个元素。
$("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。
$("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。
$("选择器:eq(index)"),表示找到符合该选择器的第index个元素。
$("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。
$("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。
$("：header"),找到所有标题元素。
$(":empty"),找到所有空元素（不包含子元素和文本的元素）<img/><hr/>
属性选择器
[属性名p]：获取有属性名p的元素
[属性名='属性值']：获取属性名 = 属性值的元素
[属性名 ！= '属性值']：获取属性名 ！= 属性值的元素
[...][...][...]多重属性选择器
[属性名^=属性值]：获得 属性名 以属性值开头的所有元素
[属性名$=属性值]：获得 属性名 以属性值结尾的所有元素
[属性名*=属性值]：获得 属性名 含有属性值的所有元素
表单类型选择器(了解)
表单属性选择器(了解)
jQuery的属性(重要)
$(selector).attr(attribute)：返回指定元素的某个属性值
$(selector).attr(attribute，value):给指定元素设置属性
attr()方法适合用于属性值不是boolean类型的属性
$(selector).prop(attribute)：返回指定元素的某个属性值
$(selector).prop(attribute，value):给指定元素设置属性
prop()方法适合用于属性值是boolean类型的属性
html():往标签体中写HTML内容(对应js中的innerHTML属性)
text():往标签体中写普通文本(对应js中的innerText属性)
val():设置或返回Value属性的属性值
只能用于获取和设置表单项的value属性
css():设置css样式
hasClass("类名")：指定元素是否包含某个类
addClass("类名"):给指定元素添加某个类
隔行换色案例
<script> $(function(){ /*- $("选择器:first"),表示找到所有符合该选择器的第一个元素。 - $("选择器:last"),表示找到所有符合该选择器的最后一个元素。 - $("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。 - $("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。 - $("选择器:eq(index)"),表示找到符合该选择器的第index个元素。 - $("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。 - $("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。 - $(":header"),找到所有标题元素。 - $(":empty"),找到所有空元素（不包含子元素和文本的元素）*/ //需求1:给第一行的背景色设置成红色 /*$("tr")[0].style.backgroundColor = "red"*/ //css()方法是设置css属性，第一个参数表示css属性名，第二个参数是css属性自 $("tr:first").css("background-color","red") //需求二:设置最后一行的背景色为绿色 $("tr:last").css("background-color","green") //需求三:设置奇数行的背景色为粉红色 $("tr:even").css("background-color","pink") //需求四:设置所有偶数行的背景色为黄色 $("tr:odd").css("background-color","yellow") //需求五:设置第五行的背景色为白色 $("tr:eq(4)").css("background-color","white") //需求六:设置前四行的背景色为红色 $("tr:lt(4)").css("background-color","red") //需求七:设置后四行的背景色为蓝色 $("tr:gt(1)").css("background-color","blue") }) </script>
全选和反选的案例
<script type="text/javascript"> $(function(){ //实现功能一:全选功能 //给全选按钮绑定点击事件 $("#selectAll").click(function(){ //设置所有子选框的选中状态跟自己一样 //name属性="selectOne"的input标签就是所有的子选框 $("input[name='selectOne']").prop("checked",this.checked) }) //实现功能二:反选功能 //给反选按钮绑定点击事件 $("#rev").bind("click",function(){ //反选其实就是将所有的子选按钮点击一遍 $("input[name='selectOne']").click() }) //实现子选按钮控制全选框的选中状态 //给所有的子选框绑定点击事件 /*$("input[name='selectOne']").click(function(){ //设置全选框的选中状态? //判断当前点击的这个子选框是否选中 if(!this.checked){ //只要有一个子选框不选中，那么全选框也不选中 $("#selectAll").prop("checked",false) }else{ //当前的子选框选中，再次遍历所有子选框，看他们是否都选中 var items = $("input[name='selectOne']") var count = 0; for(var i=0;i<items.length;i++){ if(items[i].checked){ //有一个子选框选中，计数器就+1 count ++ } } //遍历完成之后，判断计数器的大小是否等于子选框的个数 if(items.length == count){ //设置全选框选中 $("#selectAll").prop("checked",true) } } })*/ $("input[name='selectOne']").click(function(){ //其实这里就是判断所有选中的子选框的个数是否等于子选框的个数 /*var count1 = $("input[name='selectOne']").length var count2 = $("input[name='selectOne']:checked").length if(count1 == count2){ $("#selectAll").prop("checked",true) }else{ $("#selectAll").prop("checked",false) }*/ $("#selectAll").prop("checked",$("input[name='selectOne']").length==$("input[name='selectOne']:checked").length) }) }) </script>
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
