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);
