JQ 常用的相关方法事件(持续更新中)

获取元素

**$( ) **
$ 为必须, 括号中直接填写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;
    });

猜你喜欢

转载自blog.csdn.net/weixin_43410419/article/details/83892185