获取元素
**$( ) **
$ 为必须, 括号中直接填写css选择器即可
$( ‘#book’ ) //获取到id名为 book 这个元素
筛选
.find ( )
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
find前面是当前获取到的元素,括号中是普通的css选择器
box.find(’.paper .event’); //在box这个元素下找到 class名 为paper 下 class名为 event的所有元素
eq( index|-index )
获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个。
<p> This is just a test.</p> <p> So is this</p> //HTML 代码
$("p").eq(1) //获取匹配的第二个元素
$("p").eq(-2) // 获取匹配的倒数第二个元素
循环
each( callback )
等同于我们的foreach循环,同样接收一个回调函数,回调函数接收三个参数
访问匹配元素的样式属性。
css(name|pro|[,val|fn])
**说明:**当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如(“user-select”, “none”); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
$(“p”).css({ “color”: “#ff0011”, “background”: “blue” }); // 将所有段落的字体颜色设为红色并且背景为蓝色。
$("div").click(function() { // 使用参数name,回调函数 来逐渐增加div的大小
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
获取元素内容,或者设置元素的内容
html([val|fn])
val : 用于设定HTML内容的值
fn : 函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
$('p').html(); //返回p元素的内容。
$("p").html("Hello <b>world</b>!"); //设置所有 p 元素的内容
$("p").html(function(n){ //使用函数来设置所有匹配元素的内容。
return "这个 p 元素的 index 是:" + n;
});