一、JQery简介
JQ是一种封装了很多预定义的对象和实用函数的JavaScript类库。
JQ是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
当前流行的JS库除了JQery外，还有MooTools、Prototype、Dojo、YUI、EXT_JS、DWR等。
二、JQ的优势
1、JQ非常的轻巧，采用DeanEdwards编写的Packer（http://dean.edwards.name/packer/）压缩后，大小不到30KB。
2、JQ具有强大的选择器，出色的DOM操作封装。
3、可靠的事件处理机制。
4、具有完善的Ajax。
5、不污染顶级变量（只建立一个名为JQuery的对象，其余所有的操作函数方法都在这个对象之下完成）。
6、浏览器的兼容性很出色。
7、链式操作方式（同时发生在一个JQ对象上的动作，可以直接链式写而不需要重复的获取对象）。
8、隐式迭代。
9、行为层次结构分明。
10、具有丰富的插件支持，后期扩展非常方便。
11.具有完善的文档注释。
三、JQ的核心：函数和对象的访问
页面加载函数的写法：
1、最原始最麻烦的写法： jQuery(document).ready(function(){ }); 2、简写方式(开发中常用)： $(function(){});
JQ与JS页面加载的区别：1、JS页面加载存在覆盖问题，加载速度比JQ慢(除了要加载整个页面还得加载与之相关资源)。
2.、JQ页面加载不存在覆盖问题，按照书写顺序依次执行，加载速度比JS快(当整个文档绘制完毕后就执行)。
JQ对象与DOM对象之间的转换：
1、JQ向DOM转换 (可能忘记了JQ里面的方法但是记得DOM的操作)
方式一：$(element).get(index,一般都是0)
方式二：$(element)[0]
2、DOM向JQ转换 (使用$()将DOM对象包裹起来)
$(DOM对象)
注意：JQ和DOM对象不能互相使用对方的属性和方法！
四、选择器
基本选择器：
div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } .mini1{ background-color: red; }id选择器：("#id")
类选择器：("element")
元素选择器：(".class")
统配符：("*")
多个选择器同时作业（并集，中间用逗号分开）：("selector1，selector2,selectorN")
层级选择器：
("A B"） 寻找A下面的所有包含B元素的内容(儿子、孙子、重孙子)
("A>B") 寻找A下面的所有包含B元素的内容（只找儿子）
("A+B") 寻找所有匹配的紧接在A元素后的B元素(下一个同桌)
("A~B") 寻找A元素后的所有B元素（只找同辈元素）
基本过滤选择器：
(":first") 匹配符合条件的第一个元素（只取一个）
(":last") 匹配符合条件的最后一个元素（只取一个）
(":not(selector)") 去除所有与给定选择器匹配的元素
(":even") 匹配符合条件的所有偶数
(":odd") 匹配符合条件的所有奇数
(":eq(index)") 匹配所有等于给定索引值的元素(索引从0开始)
(":lt(index)") 匹配所有小于给定索引值的元素(索引从0开始)
(":gt(index)") 匹配所有大于给定索引值的元素(索引从0开始)
(":header") 匹配所有的标题元素(如:h1,h2)
(":animated") 匹配正在执行动画效果的元素
(":focus") 触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。(1.6 之后)
属性选择器
2-9 rel="stylesheet" href="../css/sty.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/assist.js" ></script> <script type="text/javascript"> $(function(){ //选取 属性title值 以 en 开始 的div元素 $("#btn1").click(function(){ $("div[title^='en']").css("background-color","red"); }); //选取 属性title值 含有 en 的div元素 $("#btn2").click(function(){ $("div[title*='en']").css("background-color","lawngreen"); }); //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素 $("#btn3").click(function(){ $("div[title='en'],div[title^='en'][title$='-']").css("background-color","navy"); }); //选取 属性title用空格分隔的值中包含字符uk的元素 $("#btn4").click(function(){ $("div[title*=' '][title*='uk']").css("background-color","yellow"); }); }); </script>属性选择器.
title为en的div元素title为en-UK的div元素title为english的div元素title为en uk的div元素title为uken的div元素
("[attribute]") 匹配包含给定属性的元素内容过滤选择器
("[ attribute=value]") 匹配给定属性是某个特定值的元素
("[attribute!=value]") 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
("[attribute^=value]") 匹配给定的属性是以某些值开始的元素
("[attribute$=value]") 匹配给定的属性是以某些值结尾的元素
("[attribute*=value]") 匹配给定属性包含给你值的元素
("[attrSel1][attrSel2][arrtrSelN]") 匹配满足多个条件的元素
2-7 rel="stylesheet" href="../css/sty.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/assist.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //选取含有文本“di”的div元素 $("div:contains(di)").css("background-color","red"); }); //选取不包含子元素(或者文本元素)的div空元素 $("#btn2").click(function(){ $("div:empty").css("backgroud-color","red"); }); //选取含有class为mini元素 的div元素 $("#btn3").click(function(){ $("div has(.mini)").css("background-color","#0000FF"); }); //选取含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background-color","red"); }); }); </script>内容过滤选择器.
id为one,class为one的divclass为miniid为two,class为one,title为test的div.class为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的span元素.
(":contains(text)") 匹配包含给定文本的元素可见性选择器
(":empty") 匹配所有不包含子元素和文本为空的元素
(":has(selector)") 匹配含有选择器所匹配的元素的元素
(":parent") 匹配含有子元素或者文本的元素
2-8 rel="stylesheet" href="../css/sty.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/assist.js" ></script> <script type="text/javascript"> $(function(){ //选取所有可见的div元素 $("#btn_visible").click(function(){ $("div:visible").css("background-color","chartreuse"); }); $("#btn_hidden").click(function(){ //选取所有不可见的元素 $(":hidden").css("background-color","#FF0000"); }); }); /*$(document).ready(function() { $('#reset').click(function() { window.location.reload(); }) //给id为mover的元素添加动画. function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); //选取所有不可见的元素.包括. $('#btn_hidden').click(function() { alert("不可见的元素有：" + $('body :hidden').length + "个!\n" + "其中不可见的div元素有:" + $('div:hidden').length + "个!\n" + "其中文本隐藏域有:" + $('input:hidden').length + "个!"); $('div:hidden').show(3000).css("background", "#bbffaa"); }) //选取所有可见的元素. $('#btn_visible').click(function() { $('div:visible').css("background", "#FF6500"); }) });*/ </script>可见性过滤选择器.
id为one,class为one的divclass为miniid为two,class为one,title为test的div.class为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的span元素.
(":hidden") 匹配所有不可见元素，或者type为hidden的元素
(":visible") 匹配所有可见的元素
匹配给定的属性是以包含某些值的元素匹配给定的属性是以包含某些值的元素表单选择器
(":input") 匹配所有input，textarea，select，button元素子元素选择器
(":text") 匹配所有单行文本框
(":password") 匹配所有的密码框
(":radio") 匹配所有的单选框
(":checkbox") 匹配所有的复选框
(":submit") 匹配所有的提交按钮
(":image") 匹配所有的图像域
(":reset") 匹配所有的重置按钮
(":button") 匹配所有按钮
(":file") 匹配所有文本域
(":enabled") 匹配所有可用元素
(":disabled") 匹配所有不可用元素
(":checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)(":selected") 匹配所有被选中的option元素
2-10 rel="stylesheet" href="../css/sty.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/assist.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //选取每个class为one的div父元素下的第2个子元素 $(".one div:gt(2)").css("background-color","hotpink"); }); /*$("#btn1").click(function(){ $("div.one :nth-child(3n+2)").css("background-color","hotpink"); }); */ //只选取了第一个 $("#btn2").click(function(){ $(".one div:first-child").css("background-color","chartreuse"); }); /*$("#btn2").click(function(){ //选取每个class为one的div父元素下的第一个子元素 $("div.one :first-child").css("background-color","chartreuse"); });*/ //只选取了最后一个 /*$("#btn3").click(function(){ $(".one div:last").css("background-color","olive"); });*/ $("#btn3").click(function(){ //选取每个class为one的div父元素下的最后一个子元素 $("div.one :last-child").css("background-color","olive"); }); $("#btn4").click(function(){ //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 $("div.one :only-child").css("background-color","chartreuse"); }); }); </script>子元素过滤选择器.
id为one,class为one的divclass为miniid为two,class为one,title为test的div.class为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的span元素.
(":nth-child") 匹配其父元素下的第N个子或奇偶元素(从1开始)
(":first-child") 匹配每个父元素下的第一个子元素
(":last-child") 匹配每个父元素下的最后一个子元素
(":only-child") 匹配父元素下的唯一 一个子元素（子元素必须唯一）
匹配给定的属性是以包含某些值的元素匹配给定的属性是以包含某些值的元素
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
