02-jQuery属性操作

jQuery内容选择器

• :empty 找到既没有文本内容也没有子元素的指定元素
• :parent 找到有文本内容或者有子元素的指定元素
• :contains(text) 找到包含指定文本内容的指定元素
• :has(selector) 找到包含指定子元素的指定元素

属性和属性节点

• 对象身上保存的变量就是属性
• 操作属性
  • 对象.属性名称 = 值;
  • 对象.属性名称;
  • 对象["属性名称"] = 值;
  • 对象["属性名称"];
• 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
• 在浏览器中找到DOM元素之后,展开看到的都是属性
• 在attributes属性中保存的所有内容属性节点
• 操作属性节点
  • DOM元素.setAttribute("属性名称","值");
  • DOM元素.getAttribute("属性名称");
• 属性和属性节点区别
  • 任何对象都有属性,但是只有DOM对象才有属性节点

jQuery属性和属性节点方法

• attr
  • 获取或者设置属性节点的值
  • 可以传递一个参数,也可以传递两个参数
  • 如果传递一个参数,代表获取属性节点的值,无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
  • 如果传递两个参数,代表设置属性节点的值,找到多少个元素就会设置多少个元素,如果设置的属性节点不存在,那么系统会新增
• removeAttr
  • 删除所有找到元素指定的属性节点
  • 如果要删除多个属性节点 属性名称用空格隔开
• prop
  • 特点和attr方法一致
• removeProp
  • 特点和removeAttr方法一致
• 注意点
  • prop方法不仅能够操作属性,还能操作属性节点
  • 官方推荐在操作属性节点时,具有true和false两个属性的属性节点,如checked,selected或者disable使用prop(),其他的使用attr()

CSS类

• addClass 添加一个类,如果要添加多个,多个类名之间用空格隔开即可
• removeClass 删除一个类,如果要删除多个,多个类名之间用空格隔开即可
• toggleClass 切换类,有就删除,没有就添加

jQuery文本操作

• html 和原生JS中的innerHTML一样
• text 和原生JS中的innerText一样
• val 和原生JS的value属性差不多

CSS样式

• 逐个设置

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

• 链式设置(链式操作如果大于3步,建议分开)

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

• 批量设置(推荐)

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

jQuery位置和尺寸

• width/height:设置的width/height

• innerWidth/innerHeight:width/height + padding

• outerWidth/outerHeight:width/height + padding + 边框

• offset:获取或者设置元素距离窗口的偏移位

• position:获取元素距离定位元素的偏移位,不能设置

• scrollTop:获取或者设置滚动的偏移位

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