【Web】0基础学Web—jQuery、jQuery遍历、jQuery样式设置、jQuery操作属性、jQuery操作节点、jQuery事件
0基础学Web—jQuery、jQuery遍历、jQuery样式设置、jQuery操作属性、jQuery操作节点、jQuery事件
- jQuery选择器
- jQuery获取内容
- jQuery遍历
- 祖先遍历
- 后代遍历
- 同胞遍历
- 过滤
- 代码示例
- 样式设置
- 操作属性
- 操作节点
- jQuery事件
jQuery选择器
$('css选择器') jQuery对象
$(this) 选取当前HTML元素
$('ul li:first') 选取第一个ul的第一个li
$('ul li:first-child') 选取每一个ul的第一个li
$(':type值') 选区对应type值的input
$('ul li:even') 偶数行
$('ul li:odd') 奇数行
jQuery获取内容
text() text('张三')
html()
val()
jQuery遍历
祖先遍历
child.parent() 父元素
child.parents() 祖先元素
child.parentsUntil(pp) child和pp之间的祖先元素
后代遍历
$("div").children() 所有子元素
$("div").children('span') 所有子元素span
$("div").find('span') 所有子孙元素span
$("div").find('*') 所有子孙
同胞遍历
siblings() 所有同辈
next() 下一个
nextAll() 下边所有
nextUntil() 获取两个同辈之间的
prev() 上一个
prevAll() 上边所有
prevUntil() 获取两个同辈之间的
过滤
$("div p").first(); 第一个div下的第一个p
$("div p").last(); 第一个div下的最后一个p
$("div p").eq(1); 第一个div下的第二个p
$("p").filter(".url"); 选出带有类名url的p
$('p.url')
$("p").not(".url"); 选出不带有类名url的p
$('p').index() 获取p在同辈中的下标
代码示例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入jquery的js文件 -->
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(function () {
//div.outter
console.log($('.inner').parent())
//div.outter div.wrapper
console.log($('.inner').parents())
//div.outter
console.log($('.inner').parentsUntil('.wrapper'))
console.log($('.outter').children())
//子元素a
console.log($('.outter').children('a').html())
//所有后代a
console.log($('.outter').find('a'))
//所有a
console.log('*',$('.outter').find('*'))
//上一个
console.log($('.outter>a').prev())
console.log($('.outter>a').prevAll())
console.log('prevUntil:', $('.outter>a').prevUntil('.inner')) // 不包含.outter>a 和 .inner
console.log($('.outter>a').next())
console.log($('.outter>a').nextAll())
console.log('nextUntil:', $('.outter>a').nextUntil('.active')) // 不包含.outter>a 和 .active
console.log('Siblings:', $('.outter>a').siblings())
// console.log('Siblings:', $('.outter>div').siblings())
console.log($('ul>li').eq(2).html()) //2222
console.log($('ul>li').filter('.third').html()) //33333
console.log($('ul>li').not('.third'))
console.log($('ul').index()) //3
})
</script>
<div class="wrapper">
<div class="outter">
<div class="inner">张三</div>
<p>python</p>
<a href="#">京东</a>
<ul>
<li><a href="#">百度</a></li>
<li>11111</li>
<li>2222</li>
<li class="third">33333</li>
</ul>
<div class="active">jquery</div>
</div>
</div>
</body>
样式设置
$("p").css("background-color"); 获取
$("p").css("key","value"); 设置一对
$("p").css({"key1":"value","key2":"value",...});
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
<style>
.wrapper>div {
width: 200px;
height: 200px;
border: 3px solid black;
}
.active {
background-color: #33b960;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
<script>
$(function () {
//1.第一种 tag.css()
$('.first').click(function () {
if ($(this).css('background-color') != 'rgba(0, 0, 0, 0)') {
$(this).css('background-color', 'rgba(0, 0, 0, 0)')
} else {
$(this).css('background-color', 'green')
}
})
$('.second').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
})
$('.third').click(function () {
$(this).toggleClass('active')
})
})
</script>
</body>
</html>
操作属性
attr(key,val) 设置
attr(key) 获取
已有属性
tag.prop('checked',true)
tag.prop('checked')
<script>
$(function () {
$('.inner').attr('id', '1001')
console.log($('.inner').attr('id'))
//自带属性
console.log($(':text').val())
console.log($(':checkbox').prop('checked'))
$(':checkbox').prop('checked', false)
})
</script>
<div class="wrapper">
<div class="inner">张十三</div>
<input type="text" value="张三">
<input type="checkbox" checked>
</div>
操作节点
创建:
$('\<p>张三\</p>')
添加
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
删除
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
替换
replaceWith() -替换
<script>
$(function () {
//创建 div
$div = $('<div></div>')
$div.addClass('wrapper')
//追加
$('body').append($div)
//创建 p
$p = $('<p>奇酷</p>')
$div.append($p) //末尾追加
//创建 h3
$h3 = $('<h3>jquery</h3>')
$p.before($h3) //h3在p之前
//创建 span
$span = $('<span>jquery</span>')
$div.prepend($span) //开头追加
$h3.remove() //删除
$div.empty() //清空
})
</script>
jQuery事件
<style>
.wrapper {
width: 200px;
height: 200px;
background-color: #7ccbb9;
}
</style>
<script>
$(function () {
// $('.wrapper').click(function(){
// console.log(111)
// })
// $('.wrapper').mouseenter(function(){
// $(this).css('background','blue')
// })
//事件监听
// $('.wrapper').on('mouseenter',function(){
// $(this).css('background','blue')
// })
$('.wrapper').on({
'mouseenter': function () {
$(this).css('background', 'blue')
},
'click': function () {
console.log(111)
}
})
})
</script>
<div class="wrapper"></div>