jQuery的一些功能小结

2021-10-19 217 阅读1分钟

jQuery 如何获取元素

在jQuery中，将一个选择表达式，放进构造函数jQuery()（简写为$），然后就得到被选中的元素。比如：

$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

或者可以jQuery特有的表达式

$('a:first') //选择网页中第一个a元素\

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素，除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

jQuery 的链式操作

在jQuery中选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，称为链式操作；

$('div') //找到div元素
    .find('h3') //选择其中的h3元素
    .eq(2) //选择第3个h3元素
    .html('Hello'); //将它的内容改为Hello

此外jQuery还提供了.end()方法，可以使得结果集退后一步；

$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello')
     .end() //退回到选中所有的h3元素的那一步
　　　.eq(0) //选中第一个h3元素
　　　.html('World'); //将它的内容改为World

jQuery创建元素

在jQuery中创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

$('<p>Hello</p>');

$('<li class="new">new list item</li>');

$('ul').append('<li>list item</li>');

jQuery移动元素

jQuery提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

是使用.insertAfter()，把div元素移动p元素后面

$('div').insertAfter($('p'));

使用.after()，把p元素加到div元素前面

$('p').after($('div'));

jQuery 修改元素的属性

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写,是js中setAttribute()和getAttribute()的简化；

$("img").attr("src","img/a.jpg");
$("img").attr("width","100px");
$('img').attr({"width":80px, "height":50px});
$("img").attr("width",function(n,v){
  return v-50;
});

此外可以用removeAttr删除属性:

$("img").removeAttr ("style");

友情链接：