锐利的jQuery笔记:第2章
锋利的jQuery笔记:第2章
一：1.$是jQuery的一个简写形式。
$(document).ready(function(){
//...
})
第一章
类似于window.onload方法。
2.DOM对象和jQuery对象
DOM:文档对象模型
jQuery对象:通过jQuery包装DOM对象后产生的对象。
$("#foo").html(); //获取id为foo的元素内的html代码。html()是jQuery里的方法。
这段代码等同于: document.getElementById("foo").innerHTML;
在jQuery对象无法使用DOM对象的任何方法。
同样，DOM对象也不能使用jQuery里的方法。
3.jQuery对象和DOM对象的相互转换。
jQuery对象转成DOM对象 ：两种水法 ，[index] 和get(index)
(1)jQuery对象是一个数组对象，可以通过[index]的方法来得到相应的DOM对象。
var $cr=$("#cr");
var or=$cr[0];
alert(cr.checked)
(2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr=$("#cr");
var cr=$cr.get(0);
alert(cr.checked)
DOM对象转成jQuery对象 ：只需要用$()把对象封装起来就可以。
--第二章 jQuery选择器
1.css选择器
2.jQuery选择器
注意：当要用jQuery检查某个元素在网页是否存在，不能用以下代码
if($("#tt")){
//
}
而应该根据获取到元素的长度来判断
if($("#tt").length>0){
//
}
或者转化成DOM对象来判断
if($("#tt")[0]){
//
}
jQuery选择哭分为基本选择器，层次选择器，过滤选择器，表单选择器。
3.基本选择器：
它通过元素id,class和标签名来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使。
示例：#id $("#test")选取id为test的元素 单个元素
.class $(".test")选取所有class为test的元素 集合元素
element $("p") 选取所有的p元素
* $("*") 选取所有元素
$("div,span,p.myClass") 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
。
4.层次选择器
#("ancestor descendant") $("div span") 选取<div>里的所有的<span>元素
#("parent > chile") $("div > span") 选取<div>元素下元素名是<span>的子元素
#('prev+next') $('.one+div')选取class为one的下一个<div>元素
$('prev～sliblings') $('#two～div') 选取id为two的元素后面的所有<div>兄弟元素。
可以使用next()方法来代替 #('prev+next') $(". one").next(“div”);
可以使用nextAll()方法来代替 $('prev～sliblings') $("#prev").nextAll("div");
siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
5.过滤选择器
主要通过特定的过滤规则来筛选所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，以一个冒号(:)开头
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对
象属性过滤选择器。
注意：eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素。
同时应该注意到nth-chile(index)的index是从1开始的，而:eq(index)是从0开始的。
同理:first和:first-child, :last和:last-child也类似。
6.选择器中的一些注意事项
a.选择器中含有特殊符号的注意事项
b.属性选择器的引号问题
c.选择器中含有空格的注意事项
var $a=$('.test :hidden'): //带空格的
选取class为"test"的元素里面的隐藏元素
var $a=$('.test:hidden');不带空格
选取隐藏的class为test的元素。
show():显示隐藏的匹配元素
css(name,value):给元素设置样式
text(string):设置所有匹配元素的文本内容
filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
addClass(class):为匹配的元素添加指定的类名。
一：1.$是jQuery的一个简写形式。
$(document).ready(function(){
//...
})
第一章
类似于window.onload方法。
2.DOM对象和jQuery对象
DOM:文档对象模型
jQuery对象:通过jQuery包装DOM对象后产生的对象。
$("#foo").html(); //获取id为foo的元素内的html代码。html()是jQuery里的方法。
这段代码等同于: document.getElementById("foo").innerHTML;
在jQuery对象无法使用DOM对象的任何方法。
同样，DOM对象也不能使用jQuery里的方法。
3.jQuery对象和DOM对象的相互转换。
jQuery对象转成DOM对象 ：两种水法 ，[index] 和get(index)
(1)jQuery对象是一个数组对象，可以通过[index]的方法来得到相应的DOM对象。
var $cr=$("#cr");
var or=$cr[0];
alert(cr.checked)
(2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr=$("#cr");
var cr=$cr.get(0);
alert(cr.checked)
DOM对象转成jQuery对象 ：只需要用$()把对象封装起来就可以。
--第二章 jQuery选择器
1.css选择器
2.jQuery选择器
注意：当要用jQuery检查某个元素在网页是否存在，不能用以下代码
if($("#tt")){
//
}
而应该根据获取到元素的长度来判断
if($("#tt").length>0){
//
}
或者转化成DOM对象来判断
if($("#tt")[0]){
//
}
jQuery选择哭分为基本选择器，层次选择器，过滤选择器，表单选择器。
3.基本选择器：
它通过元素id,class和标签名来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使。
示例：#id $("#test")选取id为test的元素 单个元素
.class $(".test")选取所有class为test的元素 集合元素
element $("p") 选取所有的p元素
* $("*") 选取所有元素
$("div,span,p.myClass") 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
。
4.层次选择器
#("ancestor descendant") $("div span") 选取<div>里的所有的<span>元素
#("parent > chile") $("div > span") 选取<div>元素下元素名是<span>的子元素
#('prev+next') $('.one+div')选取class为one的下一个<div>元素
$('prev～sliblings') $('#two～div') 选取id为two的元素后面的所有<div>兄弟元素。
可以使用next()方法来代替 #('prev+next') $(". one").next(“div”);
可以使用nextAll()方法来代替 $('prev～sliblings') $("#prev").nextAll("div");
siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
5.过滤选择器
主要通过特定的过滤规则来筛选所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，以一个冒号(:)开头
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对
象属性过滤选择器。
注意：eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素。
同时应该注意到nth-chile(index)的index是从1开始的，而:eq(index)是从0开始的。
同理:first和:first-child, :last和:last-child也类似。
6.选择器中的一些注意事项
a.选择器中含有特殊符号的注意事项
b.属性选择器的引号问题
c.选择器中含有空格的注意事项
var $a=$('.test :hidden'): //带空格的
选取class为"test"的元素里面的隐藏元素
var $a=$('.test:hidden');不带空格
选取隐藏的class为test的元素。
show():显示隐藏的匹配元素
css(name,value):给元素设置样式
text(string):设置所有匹配元素的文本内容
filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
addClass(class):为匹配的元素添加指定的类名。