为了方便测试,先将DOM元素写为以下格式:
<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>
1:empty
找到既没有文本内容也没有子元素的指定元素。
这个选择器对于以上内容只能找到第一个 div。
Javascript
var $div = $('div:empty')
console.log($div)
2:parent
找到有文本内容或有子元素的指定元素
可以找到除第一个意外的四个元素
Javascript
var $div = $('div:parent')
console.log($div)
3:contains(text)
找到包含指定文本内容的指定元素
视内容找到包含内容的 div
Javascript
var $div = $('div:contains("我是div123")')
console.log($div)
4:has(selector)
找到包含指定子元素的指定元素
视搜索内容找到包含此子元素的元素
Javascript
var $div = $('div:has("span")')
console.log($div)
1、什么是属性 对象身上保存的变量就是属性 Javascript
function Person() {}
var p = new Person()
p.name = 'tzk'
2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript
// 赋值属性
p['name'] = 'tzk'
// 获取属性
console.log(p.name)
3、什么是属性节点
<span name='xiaokang'></span>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点。
在浏览器中找到span
这个DOM元素之后,展开看到的都是属性。
在attributes属性中保持的所有内容都是属性节点。
4、操作属性节点 Javascript
var span = document.getElementsByTagName('span')[0]
// 设置属性
span.setAttribute('name', 'tzk')
// 获取属性
console.log(span.getAttribute('name'))
5、属性和属性节点的区别 任何对象都有属性,但只有DOM对象才有属性节点
1、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>
2、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
方法与attr
方法一致。
1、设置或新增属性
$("span").eq(0).prop('demo', 'name1')
$("span").eq(1).prop('demo', 'tzk')
2、获取属性
console.log($('span').prop('demo')) //name1
3、删除属性
Javascript
$("span").removeProp('demo')
4、操作属性节点
官方推荐在操作属性节点时,具有 true
和 false
两个属性的属性节点,如 checked
, selected
或者 disabled
使用 prop()
, 其他的使用 attr()
Javascript
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>
<!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>
1、添加与删除类
Javascript
btns[0].onclick = function () {
// 添加多个类用空格隔开
$('div').addClass('class1 class2')
}
btns[1].onclick = function () {
// 删除多个类用空格隔开
$('div').removeClass('class1 class2')
}
2、切换类
Javascript
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>
1、html([val|fn])
,用于设置元素的 html 元素。
类似原生 js 中的 innerHTML
方法
btns[0].onclick = function () {
$('div').html('<p>我是一个段落<span>我是一个span</span></p>')
}
Javascript
btns[1].onclick = function () {
console.log($('div').html())
}
2、text([val|fn])
类似原生 js 中的 innerText
方法。参数传入与 html()
方法一模一样
Javascript
btns[2].onclick = function () {
$('div').text('<p>我是一个段落<span>我是一个span</span></p>')
}
btns[3].onclick = function () {
console.log($('div').text())
}
3、val([val|fn|arr])
与 value 属性类似。参数传入与前两种一模一样。
Javascript
btns[4].onclick = function () {
$('input').val('请输入内容:')
}
btns[5].onclick = function () {
$('input').val()
}
1、设置属性值
$('div').css('width', '100px')
$('div').css('height', '100px')
$('div').css('background', 'red')
$('div').css('width', '100px').css('height', '100px').css('background', 'blue')
$('div').css({
width: '100px',
height: '100px',
background: 'red'
})
2、获取 css 样式。
传入参数即需要获取的样式名称。
Javascript
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>
1、offset()
获取距离窗口的偏移位。
$('div').offset().left
btns[1].onclick = function () {
$('.son').offset({
left: 10
})
}
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>
<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>
2、position
获取元素距离定位元素的偏移位
该方法只有获取不能设置,但可以通过 css 方式进行设置
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>
<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>
1、获取滚动偏移量
btns[0].onclick = function () {
console.log($('.scroll').scrollTop())
}
console.log($('html').scrollTop())
2、设置滚动偏移量
参数传入为整型,而不是字符串类型。
btns[1].onclick = function () {
$('.scroll').scrollTop(300)
}
body
进行设置。通常写法如下:
Javascript
$('html,body').scrollTop(300)$('html').scrollTop(300)