<!DOCTYPE html>
<html lang="en">
<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>jquery和dom互相转换</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box">我是div
</div>
<div id="box1">我是div
</div>
<span>我是span</span>
<p>我是p</p>
<br/>
<div id="div1">
<p class="span1">我是box中的p</p>
<!--孙子-->
<p><span>我是span1</span></p>
<!--儿子-->
<span>我是span2</span>
</div>
<div>我是div2</div>
<div>我是div3</div>
<ul id="ul1">
<li>枪兵王</li>
<li>枪兵王</li>
<li class="item">枪兵王</li>
<li>枪兵王</li>
<li>枪兵王</li>
</ul>
<ol id="ol1">
<li>雀茶</li>
<li>雀茶</li>
<li>雀茶</li>
<li>雀茶</li>
<li>雀茶</li>
</ol>
<div class="current">我是current</div>
<script type="text/javascript">
//1, dom选择器
//var div = document.querySelector('div');
//div.style.display="none"; //可以使用dom原生方法style
//2,获取jQuery对象
//$('span').hide();
//$('div').hide();
//jquery转dom $('div')[index]或者$('div').get(index)
//$('span').get(0).style.display="none"; //现在也可以使用style了
//id 选择器 $("#id")
//全选择器 $("*")
//类选择器$(".class")
//标签选择器$("div")
//并集选择器$("div,p,li")
//交集选择器$("li.current")
//子选择器 $("ul>li")
//后端选择器 $("ul li")
//$(function(){
// console.log($('.box'));
// console.log($('p'));
//})
$(function(){
$('#div1>span').css('color','red'); //成功使我是span2变色
//$('#div1 span').css('color','red'); //span1 span2都变色
})
//dom需要for循环,jquery只需要匹配对应元素,就可以设置样式,这就是jQuery隐式迭代
//$(function(){
// $('div').css('color','green');
//})
//
$(function(){
$('ul li:first').css('color','pink');
$('ul li:last').css('color','blue');
$('ul li:eq(1)').css('color','violet'); //第二个
$('ol li:even').css('color','green');
$('ol li:odd').css('color','deeppink');
})
$(function () {
//获取最近一级的父元素
//console.log($('.son').parent());
//获取子元素
//$('#box1').children('p').css('color','DarkVoilet');
})
</script>
</body>
</html>
筛选方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jQuery/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="father">
<div class="son">儿子</div>
</div>
<div class="box">
<p>我是p</p>
<div>
<p>我也是p</p>
</div>
</div>
<ul>
<li>我是li</li>
<li>我是li</li>
<li class="item">我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="current"></div>
<script type="text/javascript">
$(function(){
//1.parent()获取最近一级的父元素
console.log($('.son').parent());
//2.获取儿子children div>p
$('.box').children('p').css('color','pink');
//find div p
$('.box').find('p').css('color','green');
//获取兄弟元素
$('ul .item').siblings('li').css('color','red');
//根据索引值来设置
$('ul li').eq(2).css('color','blue');
//hasClass：判断是否有这个类名，如果有，返回true，没有就false
console.log($('div:last').hasClass('current'));
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jQuery/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>枪兵王</li>
<li>枪兵王</li>
<li class="item">枪兵王</li>
<li>枪兵王</li>
<li>枪兵王</li>
</ul>
<script type="text/javascript">
$(function(){
//只是针对设置一个样式
$(".item").click(function(){
//$(this).css('color','purple');
//$(this).siblings().css('color','blue');
//一行代替两行
$(this).css('color','purple').siblings().css('color','blue');
})
})
</script>
</body>
</html>
