对象身上保存的变量就是属性
对象.属性名称 = 值 对象.属性名称 对象[“属性名称”] = 值 对象[“属性名称”]
$(function () { function Person() { } var p = new Person() // p.name = "lnj" p["name"] = "zs" // console.log(p.name) console.log(p["name"]) })在编写HTML代码时,在HTML标签中添加的属性就是属性节点 在浏览器中找到span这个DOM元素之后, 展开看到的都是属性 在attributes属性中保存的所有内容都是属性节点
DOM元素.setAttribute(“属性名称”, “值”) DOM元素.getAttribute(“属性名称”)
$(function () { var span = document.getElementsByTagName("span")[0] span.setAttribute("name", "lnj") console.log(span.getAttribute("name")) })任何对象都有属性, 但是只有DOM对象才有属性节点
attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数如果传递一个参数, 代表获取属性节点的值如果传递两个参数, 代表设置属性节点的值如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
$(function () { $("span").attr("class", "box") })removeAttr(name)
删除属性节点
会删除所有找到元素指定的属性节点 $(function () { $("span").removeAttr("class name") })prop方法
特点和attr方法一致
$(function () { $("span").eq(0).prop("demo", "it666") $("span").eq(1).prop("demo", "lnj") console.log($("span").prop("demo")) })removeProp方法
特点和removeAttr方法一致
$(function () { $("span").removeProp("demo") })prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
$(function () { // console.log($("span").prop("class")) // $("span").prop("class", "box") console.log($("input").prop("checked"))// true / false console.log($("input").attr("checked"))// checked / undefined })作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
$(function () { var btns = document.getElementsByTagName("button") btns[0].onclick = function () { // $("div").addClass("class1") $("div").addClass("class1 class2") } })作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
$(function () { var btns = document.getElementsByTagName("button") btns[0].onclick = function () { // $("div").addClass("class1") $("div").addClass("class1 class2") } })作用: 切换类
有就删除, 没有就添加
$(function () { var btns = document.getElementsByTagName("button") btns[2].onclick = function () { $("div").toggleClass("class2 class1") } })和原生JS中的innerHTML一模一样
$(function () { var btns = document.getElementsByTagName("button") btns[0].onclick = function () { $("div").html("<p>我是段落<span>我是span</span></p>") } btns[1].onclick = function () { console.log($("div").html()) } })和原生JS中的innerText一模一样
$(function () { var btns = document.getElementsByTagName("button") btns[2].onclick = function () { $("div").text("<p>我是段落<span>我是span</span></p>") } btns[3].onclick = function () { console.log($("div").text()) } })链式操作如果大于3步, 建议分开
$(function () { $("div").css("width", "100px").css("height", "100px").css("background", "blue") })offset([coordinates])
作用: 获取元素距离窗口的偏移位
position()
作用: 获取元素距离定位元素的偏移位
position方法只能获取不能设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; border: 50px solid #000; margin-left: 50px; position: relative; } .son{ width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button") // 监听获取 btns[0].onclick = function () { // 获取元素的宽度 // console.log($(".father").width())//200 // offset([coordinates]) // 作用: 获取元素距离窗口的偏移位 // console.log($(".son").offset().left)//150 // position() // 作用: 获取元素距离定位元素的偏移位 console.log($(".son").position().left)//50 } // 监听设置 btns[1].onclick = function () { // 设置元素的宽度 // $(".father").width("500px") // $(".son").offset({ // left: 10 // }) // 注意点: position方法只能获取不能设置 // $(".son").position({ // left: 10 // }) $(".son").css({ left: "10px" }) } }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>监听获取</button> <button>监听设置</button> </body> </html>获取滚动的偏移位
console.log($(".scroll").scrollTop())获取网页滚动的偏移位
为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop())设置滚动的偏移位
$(".scroll").scrollTop(300)设置网页滚动偏移位
为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
$("html,body").scrollTop(300) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 100px; height: 200px; border: 1px solid #000; overflow: auto; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button") // 监听获取 btns[0].onclick = function () { // 获取滚动的偏移位 // console.log($(".scroll").scrollTop()) // 获取网页滚动的偏移位 // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法 console.log($("body").scrollTop()+$("html").scrollTop()) } btns[1].onclick = function () { // 设置滚动的偏移位 $(".scroll").scrollTop(300) // 设置网页滚动偏移位 // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300) } }) </script> </head> <body> <div class="scroll">我是div我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div </div> <button>获取</button> <button>设置</button> </body> </html>