Jquery学习笔记

来源：互联网发布：网络销售模式编辑：程序博客网时间：2024/05/16 09:41

常规选择器

选择器css模式jQuery模式描述元素名div{}$('div')获取所有div元素的DOM对象ID#box{}$('#box')获取一个ID为box元素的DOM对象类（class）.box{}$('box')获取所有class为box的所有DOM对象

<body><div id="box"><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p><div><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p><p>$('#box>p').css('color', 'red')</p></div></div></body>

$(function(){$('#box').css('color','blue');$('div').css('color', 'maroon')$('#box>p').css('color', 'red');})

选择器css模式jQuery模式描述群组选择器span,em,.box{}$('span, em, .box')获取对个选择器的DOM对象后代选择器ul li a{}$('ul li a')获取追朔到的多个DOM对象通配选择器*{}$('*')获取所有元素标签的DOM对象

<div id="box">div</div><div>div</div><div>div</div><div>div</div><p class="pox">p</p><p class="pox">p</p><p>p</p><p>p</p><strong>strong</strong><strong>strong</strong><strong>strong</strong><strong>strong</strong>

$(function(){$('#box, .pox, strong').css('color', 'blue');})

层次选择器
选择器CSS模式jQuery模式描述后代选择器ul li a {}$('ul li a')好去追朔到的多个DOM对象子选择器div > p{}$('div p')只获取字类节点的多个DOM对象next选择器div + p{}$('div + p')只获取某节点后一个同级DOM对象nextAll选择器div ~p{}$('div ~ p')获取某个节点后面所有同级DOM对象

属性选择器（超链接中使用较多）
CSS模式JQuery模式描述a[title]$('a[title]')获取具有这个属性的DOM对象a[title=num1]$('a[title=num1]')获取具有这个属性=这个属性值的DOM对象a[title^=num]$('a[title^=num]')获取具有这个属性且开头属性值匹配的DOM对象a[title|=num]$('a[title|=num]')获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象a[title$=num]$('a[title$=num]')获取具有这个属性且结尾属性值匹配的DOM对象获取具有这个属性且不等于属性值DOM对象a[title~=num]$('a[title~=num]')获取具有这个属性且属性值时以一个空格分割的列表，其中包含属性值的DOM对象a[title*=num]$('a[title*=num]')获取这个属性且属性值含有一个指定字符串的DOM对象a[[bbb][title=num]]$('a[bbb][title=num1]')获取具有这个属性且属性值匹配的DOM对象

过滤器

0 0