jQuery内容选择器
为了方便测试，先将DOM元素写为以下格式：
<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>
-
:empty找到既没有文本内容也没有子元素的指定元素。这个选择器对于以上内容只能找到第一个div。
var $div = $('div:empty') console.log($div) -
:parent找到有文本内容或有子元素的指定元素可以找到除第一个意外的四个元素
var $div = $('div:parent') console.log($div) -
:contains(text)找到包含指定文本内容的指定元素视内容找到包含内容的div
var $div = $('div:contains("我是div123")') console.log($div) -
:has(selector)找到包含指定子元素的指定元素视搜索内容找到包含此子元素的元素
var $div = $('div:has("span")') console.log($div)
属性和属性节点
-
什么是属性
对象身上保存的变量就是属性
function Person() {} var p = new Person() p.name = 'tzk' -
如何操作属性
对象.属性名称 = 值
对象.属性名称
对象[‘属性名称’] = 值
对象[‘属性名称’]
// 赋值属性 p['name'] = 'tzk' // 获取属性 console.log(p.name) -
什么是属性节点
<span name='xiaokang'></span>在编写HTML代码时，在HTML标签中添加的属性就是属性节点。在浏览器中找到
span这个DOM元素之后，展开看到的都是属性。在attributes属性中保持的所有内容都是属性节点。
-
操作属性节点
var span = document.getElementsByTagName('span')[0] // 设置属性 span.setAttribute('name', 'tzk') // 获取属性 console.log(span.getAttribute('name')) -
属性和属性节点的区别
任何对象都有属性，但只有DOM对象才有属性节点
attr方法
-
attr(name|pro|key,val|fn)方法-
获取或者设置属性节点的值
-
参数
-
可以传递一个参数，代表获取节点的值
无论找到多少个元素，只会返回第一个元素指定的属性节点的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { console.log($("span").attr('class')) // span1 }) </script> </head> <body> <span class="span1" name='name1'></span> <span class="span2" name='name2'></span> </body> </html> -
也可以传递两个参数，设置属性节点的值
如果设置值，找到多少个元素就会设置多少个元素。
如果设置的节点不存在，那么会新增该属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { $('span').attr('class', 'box') }) </script> </head> <body> <span class="span1" name='name1'></span> <span class="span2" name='name2'></span> </body> </html>
-
-
-
removeAttr(name)节点-
删除属性节点
-
参数
会删除所有找到元素指定的属性节点
-
删除一个节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { $('span').removeAttr('class') }) </script> </head> <body> <span class="span1" name='name1'></span> <span class="span2" name='name2'></span> </body> </html> -
删除多个属性
只需要在传递参数时用空格隔开即可。
$('span').removeAttr('class name')
-
-
prop方法
prop方法与attr方法一致。
-
设置或新增属性
$("span").eq(0).prop('demo', 'name1') $("span").eq(1).prop('demo', 'tzk')[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gwpm9eM4-1592218121162)(https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/15/914cffd3aa644a1057208025dd631ee4.png)]
-
获取属性
console.log($('span').prop('demo')) //name1 -
删除属性
$("span").removeProp('demo') -
操作属性节点
官方推荐在操作属性节点时，具有
true和false两个属性的属性节点，如checked,selected或者disabled使用prop(),其他的使用attr()console.log($('.input1').prop('checked')) //true console.log($('.input1').attr('checked')) //checked console.log($('.input2').prop('checked')) //false console.log($('.input2').attr('checked')) //undefined
图片切换的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
// 1. 给按钮添加点击事件
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
// 2. 获取输入框输入的内容
var input = document.getElementsByTagName('input')[0]
var text = input.value
// 3. 修改img的src属性节点的值
$('img').attr('src', text)
// $('img').prop('src', text)
}
})
</script>
</head>
<body>
<input type="text">
<button>切换图片</button><br />
<img src="https://www.baidu.com/img/dongsc_eb45d000832f8e889ff64951eaf7f381.gif" alt="">
</body>
</html>
jQuery类操作相关方法
<!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;
}
.class1 {
width: 100px;
height: 100px;
background: red;
}
.class2 {
border: 5px solid black
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
var btns = document.getElementsByTagName('button')
})
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
-
添加与删除类
btns[0].onclick = function () { // 添加多个类用空格隔开 $('div').addClass('class1 class2') } btns[1].onclick = function () { // 删除多个类用空格隔开 $('div').removeClass('class1 class2') } -
切换类
btns[2].onclick = function () { // 多个用空格隔开 $('div').toggleClass('class1 class2') }
文本值相关操作
<!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;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
var btns = document.getElementsByTagName('button')
})
</script>
</head>
<body>
<button>设置HTML</button>
<button>获取HTML</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取text</button>
<div></div>
<input type="text">
</body>
</html>
-
html([val|fn])，用于设置元素的html元素。类似原生js中的
innerHTML方法-
如果传入参数，则代表将当前元素的html修改为参数输入内容
btns[0].onclick = function () { $('div').html('<p>我是一个段落<span>我是一个span</span></p>') } -
如果不传入参数，则代表获取当前元素的HTML代码。
btns[1].onclick = function () { console.log($('div').html()) }
-
-
text([val|fn])类似原生js中的
innerText方法。参数传入与html()方法一模一样btns[2].onclick = function () { $('div').text('<p>我是一个段落<span>我是一个span</span></p>') } btns[3].onclick = function () { console.log($('div').text()) } -
val([val|fn|arr])与value属性类似。参数传入与前两种一模一样。
btns[4].onclick = function () { $('input').val('请输入内容：') } btns[5].onclick = function () { $('input').val() }
操作样式方法
-
设置属性值
-
逐个设置
$('div').css('width', '100px') $('div').css('height', '100px') $('div').css('background', 'red') -
链式设置
如果大于3步，建议分开
$('div').css('width', '100px').css('height', '100px').css('background', 'blue') -
批量设置
参数可以传入一个对象，对象内传入css样式。
$('div').css({ width: '100px', height: '100px', background: 'red' })
-
-
获取css样式。
传入参数即需要获取的样式名称。
console.log($('div').css('width'))
尺寸和位置相关
尺寸
以width()方法为例。
<!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;
border: 50px solid #000;
background: red;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
var btns = document.getElementsByTagName('button')
btns[0].onclick = function () {
// 获取元素的宽度
console.log($('.father').width()) //200
}
btns[1].onclick = function () {
console.log($('.father').width('500px'))
}
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
位置
-
offset()获取距离窗口的偏移位。-
获取
例如获取距离左边的偏移位
$('div').offset().left -
设置
参数内传入一个对象，对象内写需要设置的属性
btns[1].onclick = function () { $('.son').offset({ left: 10 }) }
<!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; border: 50px solid #000; background: red; margin-left: 50px; position: relative; } .son { width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { var btns = document.getElementsByTagName('button') btns[0].onclick = function () { console.log($('.son').offset().left) //150 } btns[1].onclick = function () { $('.son').offset({ left: 10 }) } }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> </body> </html> -
-
position获取元素距离定位元素的偏移位该方法只有获取不能设置，但可以通过css方式进行设置
<!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; border: 50px solid #000; background: red; margin-left: 50px; position: relative; } .son { width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { var btns = document.getElementsByTagName('button') btns[0].onclick = function () { console.log($('.son').position().left) //50 } btns[1].onclick = function () { // 无法设置，即使设置也不生效 $('.son').position({ left: 10 }) } }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> </body> </html>
scrollTop方法
-
获取滚动偏移量
-
元素
btns[0].onclick = function () { console.log($('.scroll').scrollTop()) } -
网页
console.log($('html').scrollTop())IE浏览器下可能无法获取，需要将
html换成body。常用写法如下：console.log($('html').scrollTop()+$('body').scrollTop())
-
-
设置滚动偏移量
参数传入为整型，而不是字符串类型。
-
元素
btns[1].onclick = function () { $('.scroll').scrollTop(300) } -
网页
$('html').scrollTop(300)同样的IE浏览器不可使用，需要对
body进行设置。通常写法如下：$('html,body').scrollTop(300)
-