1、在jQuery库中，$就是jQuery的一个简写形式，如果没有特殊说明，程序中的$符号都是jQuery的一个简写形式。
2、window.onload必须等待网页中所有的内容加载完毕后（包括图片）才能执行
$(document).ready() 网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。
3、$(".level1 > a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
});
这段代码的作用是，当鼠标单击到a元素（它是class含有level1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。
$(".level > a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除"current"样式
.next().hide(); //它们的下一个元素隐藏
return false;
});
4、//在一个id为table的表格的tbody中，如果每行的一列中的checkbox没有被禁用，则把这行的背景设为红色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");
5、DOM对象
DOM（Document Object Model,文档对象模型)，每一份DOM都可以表示成一棵树。
可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。示例如下：
var domObj = document.getElementById("id"); //获得DOM对象
var objHTML = domObj.innerHTML; //使用JavaScript中的属性-------innerHTML
6、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。例如： $("#foo").html(); //获取id为foo的元素内的html代码。
jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，在jQuery对象中无法使用DOM对象的任何方法。
7、jQuery对象和DOM对象的相互转换
jQuery对象提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
（2）通过get(index)方法得到相应的DOM对象。
var $cr =$("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象，方式为$(DOM对象)
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
8. CSS选择器
标签选择器 E { 以文档元素作为选择符 td {
CSS规则 font-size : 14px;
} }
ID选择器 #ID { 以文档元素的惟一标识符ID #note {
CSS规则 作为选择符 font-size : 14px;
} }
类选择器 E.className { 以文档元素的class作为选择符 div.note {
CSS规则 font-size : 14px;
} }
群组选择器 E1,E2,E3 { 多个选择符应用同样的样式规则 td.p, div.a {
CSS规则 color:red;
} }
后代选择器 E F { 元素E的任意后代元素 F #links a {
CSS规则 font-size : 14px;
} }
通配选择符 * { 以文档的所有元素作为选择符 * {
CSS规则 font-size : 14px;
} }
此外 CSS中还有伪类选择器 （E:PseudoElements{CssRules}）、子选择器 ( E > F { CssRules}) 和 属性选择器 ( E [ attr ] { CssRules })
9. jQuery选择器
CSS获取到元素的代码如下 ：
.demo { ... } //给class为demo的元素添加样式
jQuery 获取到元素的代码如下 ：
$(".demo").click(function() { ... }) //给class为demo的元素添加行为
10 . $("#ID") 用来代替 document.getElementById()函数，即通过ID获取元素；
$("tagName") 用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素；
$('#tt')获取的永远是对象，即使网页上没有此元素，因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码:
if( $("#tt")){ // do something}
而应该根据取到元素的长度来判断，代码如下 ： if ($("#tt").length > 0 ) { // do something}
或者转化成DOM对象来判断，代码如下: if( $("#tt")[0] ) { // do something }
11. 基本原则器
$("#id") 根据给定的id匹配一个元素 返回单个元素
$(".class") 根据给定的类名匹配元素 返回集合元素
$("element") 根据给定的元素名匹配元素 返回集合元素
$("*") 匹配所有元素 返回集合元素
$("selector1,selector2 ......") 将每一个选择器匹配到的元素合并后一起返回 返回集合元素
12. 层次选择器
$(" ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 返回集合元素
$(" parent > child") 选取parent元素下的child（子）元素 返回集合元素
$(" prev + next") 选取紧接在prev元素后的next元素 返回集合元素
$("prev ~ siblings") 选取prev元素之后的所有siblings元素 返回集合元素
可以使用next()方法来代替$('prev + next') 选择器 $("prev").next("div")，使用nextAll()方法来代替$('prev ~ siblings') 选择器 $("#prev").nextAll("div")
13. 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
（一） 基本过滤选择器
:first 选取第一个元素 返回单个元素 $("div:first")选取所有<div>元素中第1个<div>元素
:last 选取最后一个元素 返回单个元素 $("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector) 去除所有与给定选择器匹配的元素 返回集合元素 $("input:not(.myClass)")选取class不是myClass的<input>元素
:even 选取索引是偶数的所有元素，索引从0 开始 返回集合元素 $("input: even") 选取索引是偶数的<input>元素
:odd 选取索引是奇数的所有元素，索引从0开始 返回集合元素 $("input: odd") 选取索引是奇数的<input>元素
:eq(index) 选取索引等于index 的元素（index从0开始） 返回单个元素 $("input:eq(1)") 选取索引等于1的<input>元素
:gt(index) 选取索引大于index的元素(index从0开始) 返回集合元素 $("input:gt(1)") 选取索引大于1 的<input>元素（大于1 ，而不包含1）
:lt(index) 选取索引小于index的元素(index从0开始) 返回集合元素 $("input:lt(1)") 选取索引小于1的<input>元素 （小于1，而不包含1）
:header 选取所有的标题元素，例如h1,h2,h3等等 返回集合元素 $(":header") 选取网页中所有的<h1>,<h2>,<h3>......
: animated 选取当前正在执行动画的所有元素 返回集合元素 $("div:animated") 选取正在执行动画的<div>元素
:focus 选取当前获取焦点的元素 返回集合元素 $(':focus')选取当前获取焦点的元素
（二） 内容过滤选择器
:contains(text) 选取含有文本内容为"text"的元素 返回集合元素 $("div:contains('我'))选取含有文本"我"的<div>元素
:empty 选取不包含子元素或者文本的空元素 返回集合元素 $("div:empty")选取不包含子元素（包含文本元素）的<div>空元素
:has 选取含有选择器所匹配的元素的元素 返回集合元素 $("div:has(p)") 选取含有<p>元素的<div>元素
:parent 选取含有子元素或者文本的元素 返回集合元素 $(div:parent")选取拥有子元素（包含文本元素）的<div>元素
(三）可见性过滤选择器
:hidden 选取所有不可见的元素 返回集合元素 $(":hidden")选取所有不可见的元素，包含<input type="hidden"/>,<div style="display:none;">
和<div style = "visibility:hidden;">等元素
:visible 选取所有可见的元素 返回集合元素 $("div:visible")选取所有可见的<div>元素
（四） 属性过滤选择器
[attribute] 选取拥有此属性的元素 返回集合元素 $("div[id]")选取拥有属性id的元素
[attribute = value] 选取属性的值为value的元素 返回集合元素 $("div[title = test]") 选取属性title为test的<div>元素
[attribute != value] 选取属性的值不等于value的元素 返回集合元素 $("div[title != test]") 选取属性title不等于test的<div>元素（注意：没有属性title的<div>元素也会被选取）
[attribute ^= value] 选取属性的值以value开始的元素 返回集合元素 $("div[title ^= test]")选取属性title以test开始的<div>元素
[attribute $= value] 选取属性的值以value结束的元素 返回集合元素 $("div[title $= test]")选取属性title以test结束的<div>元素
[attribute *= value] 选取属性的值含有value的元素 返回集合元素 $("div[title *= test]")选取属性title含有test的<div>元素
[attribute |= value] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符"-"）的元素 返回集合元素 $('div[title|="en"]') 选取属性title等于en或 以en为前缀(该字符串后跟一个连字符'-')的元素
[attribute ~= value] 选取属性用空格分隔的值中包含一个给定值得元素 返回集合元素 $('div[title~="uk"]') 选取属性title用空格分隔的值中包含字符uk的元素
[attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 返回集合元素 $("div[id][title$='test']")选 取拥有属性id，并且属性title以test结束的<div>元素
扫一扫
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
