1.jQuery基础
1.1 在HTML页面中包含jQuery程序库代码
从jQuery.com上下载jq版本文件,用
1.2 用选择器和jq函数选择DOM元素
$('xx');//xx可以是标签,可以是类名,可以是id值等选择器。
link
link
link
link
link
link
Paste_Image.png
1.3 在指定上下文中选择DOM元素
$('input',xxx):选择input标签中满足xxx的。
eg:
$('input',$('form')):i选择nput标签包含在form标签中的
$('input',document.forms[0]):选择包含在第一个form标签中的input标签
$('input','body'):选择整个body的input标签
$(xxx).length :返回包含的元素的数目。
1.4 过滤DOM元素包装器集
$('xx').filter('yyy'):滤出含有yyy的xx
link
link
link
link
link
filter()方法也可以传递一个用于过滤包装器集的函数:
alert(
$('a')
.filter(function(index){ return $(this).hasClass('external');})
.length + ' external links'
)
现在传递给filter()方法的是一个匿名函数。调用这个函数的上下文与当前元素相同,也就是说当在函数中使用$(this)时,实际应用的是包装器集中的每个DOM元素。在函数中,检查包装器集中每个< a>元素的类值(hasClass())是否为external。如果是,返回逻辑真值,该元素保留在集合中;否则从集合中删除元素。即:如果函数返回假值,则删除元素,如果返回其他值,该元素就会留在包装器集中。
1.5 查找当前选择包装器集中的后代元素
$(‘xxx’).find(‘yyy’):查找xxx内部包含有yyy的
a paragraph a paragraph a paragraph
a paragraph a paragraph a paragraph
a paragraph a paragraph a paragraph
a paragraph a paragraph a paragraph
也可以:
alert($('em',$('p')).length);//将上下文引用作为jq函数的第二个参数
alert($('p em').length);
tip:fliter()和find()的区别:
.find()将操作/选择当前集合的子元素,而.filter()只操作当前元素集。
1.6 返回破坏性修改之前的选择
end()方法返回使用破坏性方法之前选择的一组DOM元素。
alert($('p').filter('.middle').length);//1
alert($('p').filter('.middle').end().length);//3
alert($('p').filter('.middle').find('span').end().end().length);//3
- $('p'):找到所有的< p>
- $('p').filter('.middle'):找到所有带有‘middle’类的< p>
- $('p').filter('.middle').find('span'):找到所有带有‘middle’类的< p>内部的
- $('p').filter('.middle').end():返回前一个破坏性方法前的包装器集,即返回filter()方法前的包装器集,即所有的< p >
- $('p').filter('.middle').find('span').end():返回前一个破坏性方法前的包装器,即返回find()方法前的包装器集,即所有带有‘middle’类的< p>
- $('p').filter('.middle').find('span').end().end():撤销filter()方法和find()方法,即返回所有的< p >
tip:如果使用end()方法之前没有执行破坏性操作,将会返回一个空集。破坏性操作指的是任何改变匹配jQuery元素集合的操作,也就是返回jQuery对象的任何遍历或者操作方法,包括add(),andSelf(),children(),closes(),filter(),find(),map(),next(),nextAll(),not(),parent(),parents(),prev(),prevAll(),siblings(),slice(),clone(),appendTo(),prependTo(),insertBefore(),insertAfter()和replaceAll()。
1.7 将前一个选择集包含到当前选择集
andSelf()方法合并前一个DOM元素选择集和当前选择集。
text
text
tip:当使用andSelf()方法时,它只向当前操作集合中添加前一个集合,而不是以前选择的所有集合。
1.8 根据当前上下文遍历DOM获得新的DOM元素集
1.9 创建、操作和插入DOM元素
1.9.1 创建
$('');
1.9.2 操作
$('').find('a').attr('href','http://www.jquery.com').end()
1.9.3 插入
$('').find('a').attr('href','http://www.jquery.com').end().appendTo('body')
1.10 删除DOM元素
1.javascript执行之前,元素将一直留在页面中。
2.在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除,可以在必要的时候将它们重新添加到DOM中。
3.这种方法不仅从DOM中删除元素,而且删除被删除元素包含的所有事件处理程序和内部缓存数据。
1.11 替换DOM元素
- name
- name
- name
- name
- name
- name
也可以用replaceAll():
$('removed ').replaceAll('li.remove');
1.12 克隆DOM元素
clone()方法复制DOM元素,结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。
- list
- list
- list
- list
克隆方法不仅可以移动DOM元素,而且可以包括附加到克隆的DOM元素中的事件。
- list
- list
- list
- list
1.13 获取、设置和删除DOM元素属性
1.13.1 设置属性:
$('xx').attr('属性名','属性值')
也可以设置多个属性:
$('xxx').attr({'href':'http://www.jquery.com','title':'jquery.com'})
1.13.2 获取属性:
$('xx').attr('属性名')
1.13.3 删除属性:
$('xx').removeAttr('属性名')
tip:
addClass():用新的类/值更新class属性值,包括任何已经设置的类。
hasClass():检查特定类的class属性值。
removeClass():从class属性中删除特定的类,同时保持已经设置的任何值。
toggleClass():如果特定类不存在则添加,如果存在则删除该类。
1.14 获取和设置HTML内容
1.14.1 设置HTML内容
$('p').html('hello');
1.14.2 获取HTML内容
$('p').html();
tip:html()方法在XML文档中不可用,但是可用于XHTML文档。
1.15 获取和设置文本内容
1.15.1 设置文本内容
$('p').text('hello')
1.15.2 获取文本内容
$('p').text()
1.16 在不造成全局冲突的情况下使用$别名
创建一个匿名的自调用函数,将jQuery代码写到这个函数里面。
(function($){
//code;
})(jQuery);
2. 用jQuery选择元素
在文档中选择一个特定的元素或者一组元素的最简方法是在jQuery包装器函数中使用CSS选择器:
$('#content p a'):选择#content中的
选择了所需元素后,就可以对元素进行操作了:
$('#content p a').addClass('selected');
tip:选择器越复杂,jQuery处理字符串的时间就越长。
$('body div#wrapper div#content')没有必要,$('#content')即可,且快。
2.1仅选择子元素
2.1.1 直接后代组合符(>)
tip:后代是存在于另一个元素中的任何元素,而子元素是直接后代。
tip:$('>p','#content')和$('#content > p')本质上是一样的。
2.1.2 children():选择所有子元素
$('#content').children();//获取#content的所有子元素 $('#content').children('p');//获取#content的所有
子元素 var anchors = $('a'); anchors.children();//获取所有的子元素 $('> *', anchors);//获取所有的子元素 anchors.find('> *');//获取所有的子元素
2.2 选择特定的兄弟元素
2.2.1 相邻兄弟元素组合符(+)
1
2
3
4
5
2.2.2 siblings():选择所有兄弟元素
$('h1').siblings('h2,h3,p');//选择作为h1元素兄弟的所有h2,h3,p
2.2.3 nextAll():根据相对位置选择兄弟元素
- first
- second
- third
- fourth
- fifth
2.2.4 普通兄弟元素组合符(~)
$('li.selected~li');//效果同上,选择在li.selected后的所有li
2.3 按照索引顺序选择元素
2.3.1 过滤器
:first //匹配选中的第一个元素
:last //匹配选中的最后一个元素
:even //匹配索引为偶数的元素(索引从0开始)
:odd //匹配索引为奇数的元素(索引从0开始)
:eq(n) //按照索引(n)匹配单个元素
:lt(n) //匹配索引小于n的所有元素
:gt(n) //匹配索引大于n的所有元素
- first
- second
- third
- fourth
用例:表格行中交替样式是常见的需求:
table tr.even {
background-color: #ccc;
}
td {
border:1px solid black;
width: 50px;
height: 30px;
}
table {
border-collapse:collapse;
}
0 even
1 odd
2 even
3 odd
4 even
Paste_Image.png
tip:过滤器左边需要一个初始集合,这个集合可以在已经实例化的jQuery对象中,例如:$('ul li').filter(':first');//这个过滤方法将运行在< li >上,选出第一个< li >
2.4 选择当前动画元素
:animated过滤器将只匹配正在连续变化的元素:
$('div:animated');//选择当前正在连续变化的所有
元素
2.5 根据包含的内容选择元素
2.5.1 contains():
$('span:contains("Bob")');//选择包含“Bob”的所有span元素
tip:这个选择器区分大小写,即如果没有bob,而选择器里面写了bob,就会什么都找不到。另外,contains的括号里面可以不加引号,但是加引号是一个好习惯。
2.5.2 :has()
$('div:has(p a)');//匹配在
2.6 选择不匹配的元素
2.6.1 :not过滤器
$('div:not(#content)');//选择#content之外的所有div元素
:not()里面可以很复杂:
$('a:not(div.important a,a.nav)');//选择不在“div.important"中的a元素和类不为"nav"的
元素
tip:向:not过滤器传递复杂的选择器只在jQuery版本1.3以及更高的版本中才可行。在较低版本中,只能接受简单的选择器表达式。
2.6.2 .not()方法
var anchors = $('a'); anchors.click(function() { anchors.not(this).addClass('not-clicked');//除了被点击的这个
元素不被添加'not-clicked'类,其他元素都被加上'not-clicked'类;this指代单击的元素;.not()中也可以是选择器 });
2.7 根据元素可见性选择元素
$('div:hidden');
if($('#elem').is(':hidden')) {
//code here;
}
$('p:visible').hide();
2.8 根据属性选择元素
属性选择器:
[attr] //匹配具有指定属性attr的元素
[attr=val] //匹配指定属性attr为某个值val的元素
[attr!=val] //匹配没有指定属性attr或者属性值不为某个值val的元素
[attr^=val] //匹配指定属性attr为以某个值val开始的元素
[attr$=val] //匹配指定属性attr为以某个值val结束的元素
[attr~=val] //匹配包含指定值和两侧包含空格的元素
多个属性选择器:
$('*[title][href]');
2.9 按照类型选择表单元素
Paste_Image.png
$(':text');//选择所有文本输入控件;
$(':input');//选择所有的input,textarea,button,select元素
2.10 选择有具体特性的元素
2.10.1 给filter()传递一个函数
函数的返回值将定义某个元素是否被选择。传递的函数将对当前选择集中的每个元素运行,每当函数返回假值时,对应的元素就从选择集中删除,每当返回真值时,对应的元素不受影响(即留在集合中)。
$('*').filter(function(){
return !! $(this).css('backgroundImage');
//!!是JavaScript中将任何数据类型值转换为布尔表达式的快速方法。
//如果元素不存在'backgroundImage',就返回假值,然后将选择器中的这个元素删除;
//如果元素存在'backgroundImage',就返回真值,元素不受影响。
//所以这个代码选择所有具有背景图片的元素。
});
选择所有宽度在100-200像素之间的div元素:
$('div').filter(function(){
var width = $(this.width();
return width >100 $ width <200;
}):
tip:越长和越复杂的选择器返回结果想、所需的时间也越长。
2.11 创建一个自定义过滤器选择器
jQuery.expr[':'].inline = function (elem) { return jQuery(elem).css('display')==='inline';//创建了一个自定义选择器“inline”,选择display属性为inline的元素; }; $('div a:inline').css('color','red');//使用inline选择器,选择了div元素下的display属性为inline的
元素, //为其添加CSS样式:颜色:红色。