jq 杂

Posted 2020-11-09 前端__小川

1.获取属性的方法

　　attr（）；

$("img").attr("src");//获得img标签的src的属性值
$("img").attr("src","test.jpg");//给img标签的src属性赋值。
$("img").attr({ src: "test.jpg", alt: "Test Image" });//给img标签的多个属性赋值
$("img").attr("title", function() { return this.src });//可以写函数

　　removeAttr（）；

$("img").removeAttr("src"); //移除img的src属性

2.对css的class的操作方法

　　addClass();

$("p").addClass("selected");//给p标签添加selected添加class值
$("p").addClass("selected1 selected2");//给p标签添加多个class值得方法

　　removeClass():

$("p").removeClass("selected");//删除selected的class值
$("p").removeClass();//删除所有的class值
$(‘li:last‘).removeClass(function() {//删除这个元素跟上一个元素的class共有的值
    return $(this).prev().attr(‘class‘);
});

　　toggleClass();如果有这个class就去删除，如果没有就去添加

$("p").toggleClass("selected");//为匹配的元素切换 ‘selected‘ 类
$(‘div.foo‘).toggleClass(function() {//根据父元素来设置class属性
  if ($(this).parent().is(‘.bar‘) {
    return ‘happy‘;
  } else {
    return ‘sad‘;
  }
});

3.跟文本和html节点有关的

　　html();

$(‘p‘).html();//获取p标签下的所有内容，包括文本和元素节点
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
});

　　text();

$(‘p‘).text();//返回p元素的文本内容。
$("p").text("Hello world!");//设置所有 p 元素的文本内容

　　val();

$("input").val();//获取文本框中的值
$("input").val("hello world!");//设定文本框的值

4.css

　　css();

$("p").css("color");//获取p标签的color属性值
$("p").css("color","red");//将所有段落字体设为红色
$("p").css({ color: "#ff0011", background: "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。

5.位置

　　offset()：获取匹配元素在页面最左端的相对偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

console.log($("#test").offset());//{left:100,top:100}

　　position(): 获取元素相对父元素（相对定位的元素）的偏移；此方法只对可见元素有效。

console.log($("#posi").position());//获取跟最近的父级（定位为relative）的偏移量

　　scrollTop();获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );//获取第一段相对滚动条顶部的偏移
$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移

　　 scrollLeft（）；

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );//获取第一段相对滚动条左侧的偏移
$("div.demo").scrollLeft(300);//设置相对滚动条左侧的偏移

6.尺寸

　　height();

$("p").height();//获取p元素的高
$("p").height(20);//把所有段落的高设为 20:

　　width();

$("p").width();//p元素的宽
$("p").width(20);//设置p元素的宽

　　innerHeight();获取第一个匹配元素内部区域高度（包括padding、不包括border,margin）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );//获取第一个p元素的内部区域高度。

　　innerWidth()：获取第一个匹配元素内部区域宽度（包括padding、不包括border,margin）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );//获取第一个p元素的宽度

　　outerHeight(): 获取匹配元素的外部高度（包括padding，border  但是不包括margin）此方法对可见和隐藏元素均有效。如果 里面参数是 true的话，最终值是包括margin的

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );//第一个就是没有margin的值，第二个表示有margin的值

 

　　outerWidth(): 获取匹配元素的外部高度（包括padding，border  但是不包括margin）此方法对可见和隐藏元素均有效。如果 里面参数是 true的话，最终值是包括margin的

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );//第一个就是没有margin的值，第二个表示有margin的值