jQuery-属性操作

jq四大内容选择器

:empty

作用：找到既没有文本内容也没有子元素的指定元素

 var $div = $("div:empty");
 console.log($div);

:parent

作用： 找到有文本内容或有子元素的指定元素

var $div = $("div:parent");
console.log($div);

:contains(text)

作用：找到包含指定文本内容的指定元素

var $div = $("div:contains('我是div')");
console.log($div);

:has(selector)

作用： 找到包含指定子元素的指定元素

 var $div = $("div:has('span')");
 console.log($div);

---

操作属性节点

1.arrt方法

DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);

var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));

attr(name|pro|key,val|fn)

作用:
获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

注意点:
  如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
  如果是设置:找到多少个元素就会设置多少个元素
  如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

.removeAttr(name)

删除属性节点

   注意点:
      会删除所有找到元素指定的属性节点

prop方法

特点和attr方法一致

removeProp方法

 $("span").eq(0).prop("demo", "it666");
$("span").eq(1).prop("demo", "lnj");
 console.log($("span").prop("demo"));

 $("span").removeProp("demo");

注意点:

prop方法不仅能够操作属性, 他还能操作属性节点

   官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，
   如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

jq操作类相关与文本值相关

操作类相关

1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可

  $("div").addClass("class1 class2");

2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可

 $("div").removeClass("class2 class1");

3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加

$("div").toggleClass("class2 class1");

文本值相关

1.html([val|fn])
和原生JS中的innerHTML一模一样

    $("div").html("<p>我是段落<span>我是span</span></p>");

2.text([val|fn])
和原生JS中的innerText一模一样

$("div").text("<p>我是段落<span>我是span</span></p>");

3.val([val|fn|arr])

 $("input").val("请输入内容");

jq操作css样式和位置/尺寸/滚动

css样式

1.逐个设置

$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

2.链式设置
注意点: 链式操作如果大于3步, 建议分开

 $("div").css("width", "100px").css("height", "100px").css("background", "blue");

3.批量设置

 $("div").css({
                width: "100px",
                height: "100px",
                background: "red"
            });

4.获取CSS样式值
console.log($("div").css("background"));;

位置和尺寸

获取元素的宽度

console.log($(".father").width());
offset([coordinates])

作用: 获取元素距离窗口的偏移位

 console.log($(".son").offset().left);
position()

作用: 获取元素距离定位元素的偏移位

console.log($(".son").position().left);

设置元素的宽度

$(".father").width("500px")
    
       $(".son").offset({
             left: 10
         });

// 注意点: position方法只能获取不能设置
         $(".son").position({
             left: 10
         });

scroll相关

获取滚动的偏移位

 console.log($(".scroll").scrollTop());

获取网页滚动的偏移位

 // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
   console.log($("body").scrollTop()+$("html").scrollTop());

设置滚动的偏移位

  $(".scroll").scrollTop(300);

设置网页滚动偏移位

 // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
 $("html,body").scrollTop(300);