JQuery元素快速查与操作
⾸先，我们来看看jquery中如何查到想要的结点。
第⼀步：sizzle选择器
基于元素的id、类、类型、属性、属性值等"查"（或选择）HTML元素，简单的说是基于css选择器，除此之外还有⼀些特定的选择器。
第⼆步：查询祖先
parent()
返回被选元素的直接⽗元素，该⽅法只会向上⼀级对 DOM 树进⾏遍历
parents()
可以使⽤可选参数来过滤对⽗元素的搜索
返回被选元素的所有祖先元素，它⼀路向上直到⽂档的根元素
parentsUntil()
返回介于两个给定元素之间的所有祖先元素，下⾯是例⼦：
$(document).ready(function(){
//会返回span开始到div为⽌的祖先元素
$("span").parentsUntil("div");
});
第三步：查询⼦孙
children()
可以使⽤可选参数来过滤对⼦元素的搜索
返回被选元素的所有直接⼦元素，该⽅法只会向下⼀级对 DOM 树进⾏遍历
find()
可以使⽤可选参数来过滤对元素的搜索
返回被选元素的后代元素，⼀路向下直到最后⼀个后代
第四步：查询同胞
siblings()
返回被选元素的所有同胞元素
next()
返回被选元素的下⼀个同胞元素
nextAll()
返回被选元素的之后的全部同胞元素
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素jquery的attr属性
$(document).ready(function(){
/
/返回介于 <h2>与<h6>元素之间的所有同胞元素
$("h2").nextUntil("h6");
});
prev()、prevAll() 和 prevUntil()
prev()、prevAll()以及prevUntil()⽅法的⼯作⽅式与上⾯的⽅法类似，只不过⽅向相反⽽已：它们返回的是前⾯的同胞元素（在DOM 树中沿着同胞之前元素遍历，⽽不是之后元素遍历）。
第五步：查询时添加过滤
first()
返回选择的元素中的⾸个元素
last()
返回选择的元素中的最后⼀个元素
eq()
返回被选元素中带有指定索引号的元素，这个很容易理解，举例就是：$(element[flag])和element.eq(flag)结果⼀样
filter()
对查询结果进⾏过滤，和下⾯not()类似，作⽤相反
not()
返回不匹配标准的所有元素
$(document).ready(function(){
//返回不带有类名"target"的所有p元素
$("p").not(".target");
});
元素到以后，接着我们需要根据需求来对查到的结点进⾏操作。
第六步：text()、html()、val()以及attr()
text()、html()、val()以及attr()，拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使⽤的字符串
<() - 设置或返回所选元素的⽂本内容
2.html() - 设置或返回所选元素的内容（包括 HTML 标记）
3.val() - 设置或返回表单字段的值
4.attr() - 设置或返回属性值
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧⽂本: " + origText + " 新⽂本: index: " + i;
});
});
第七步：添加元素
append() - 在被选元素的内部结尾插⼊内容
prepend() - 在被选元素的内部开头插⼊内容
after() - 在被选元素之后插⼊内容
before() - 在被选元素之前插⼊内容
第⼋步：删除元素
remove()可接受⼀个参数，允许你对被删元素进⾏过滤，empty()不可以
remove() - 删除被选元素（及其⼦元素）
empty() - 从被选元素中删除⼦元素
//等同于$("p.target").remove();
$("p").remove(".target");
第九步：替换元素
replaceAll()和replaceWith()功能类似，但是⽬标和源相反
replaceWith() - ⽤提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合replaceAll() - ⽤集合的匹配元素替换每个⽬标元素
第⼗步：class操作
addClass() - 向被选元素添加⼀个或多个类
removeClass() - 从被选元素删除⼀个或多个类
toggleClass() - 对被选元素进⾏添加/删除类的切换操作
hasClass() - 判断⼀个元素是否存在该class
第⼗⼀步：css()⽅法
设置或返回被选元素的⼀个或多个样式属性
css("propertyname"); - 返回propertyname属性的值
css("propertyname","value"); - 设置propertyname属性的值
css({"propertyname":"value","propertyname":"value",...}); - 设置多个值
第⼗⼆步：元素尺⼨
width() ⽅法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() ⽅法设置或返回元素的⾼度（不包括内边距、边框或外边距）innerWidth() ⽅法返回元素的宽度（包括内边距）
innerHeight() ⽅法返回元素的⾼度（包括内边距）
outerWidth() ⽅法返回元素的宽度（包括内边距和边框）
outerHeight() ⽅法返回元素的⾼度（包括内边距和边框）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。