jQuery基础语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
美元符号定义 jQuery,
jQuery基础选择器
原生js获取元素的方式有很多,很杂,jQuery做了封装,使元素统一标准
$("选择器") //里面选择器直接写CSS选择器即可,但是要加引号
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function(){
console.log($(".nav"));;//选取出 我是div
console.log($("ol li"));//选取ol里面的li
})
</script>
jQuery设置样式
$('div').css('属性','值')
隐式迭代,即给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化操作,方便调用
//获取页面中所有的div
$("div");
//隐式迭代,即给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化操作,方便调用
//给div设置颜色 jQuery不能使用style
$("div").css("background","pink");//给所有div盒子背景改为粉色
$("ol li").css("color","blue");//给所有ol里面的li的字体改为蓝色
jQuery筛选选择器
语法 用法 描述
:first() $(" li:first") 获取第一元素
:last() $(“li:last”) 获取最后一个元素
:eq(index) $(“li:eq(2)”) 匹配index下标的元素
:odd $(“li:odd”) 获取到的li元素中,选择索引号为奇数的元素
:even $(“li.even”) 获取到的li元素中,选择索引号为偶数的元素
$("ol li:eq(2)").css("color","red");//给ol里面的第三个li改为红色
jQuery筛选方法
语法 用法 说明
.parent() $(“li”).parent() 查找父级 最近一级(亲父亲)
.children(selector) $(“li”).children(“li”) 相当于$(“ul>li”),最近一级(亲儿子)
.find(selector) $(“li”).find(“li”) 后代查找
.siblings(selector) $(".first").silibing("li’) 查找兄弟节点,不包括自身
$(“.dd”).children("ul"),show(); //找到.dd下的带Ul的所有子元素 显示
$("ol .item").siblings("li").css("color","red");
//选择除了自己以外的所有亲兄弟,将其字改为红色
//选择第n个元素
$("ul li:eq(2)").css("color","blue")
$("ul li").eq(index).css("color","blue")//两种方法都可,更推荐这一种,便于修改
//判断是否有某个类名
console.log($('div:first').hasClass("current"));//返回结果为true或false
案例: jQuery实现下拉菜单
<style>
*{
padding: 0;
margin: 0;
}
li,a{
text-decoration: none;
list-style: none;
}
.nav{
width: 300px;
margin: 100px auto;
}
a:hover{
background-color: bisque;
}
.nav>li{
display: inline-block;
width: 40px;
height: 400px;
margin: auto 5px;
}
.nav ul{
position: absolute;
display: none;
}
.nav ul>li{
border-left: 1px solid rgb(143, 106, 106);
border-right:1px solid rgb(143, 106, 106) ;
border-bottom:1px solid rgb(143, 106, 106);
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="nav">
<li>
<a href="#">菜单</a>
<ul>
<li>选项</li>
<li>选项</li>
<li>选项</li>
</ul>
</li>
<li>
<a href="#">菜单</a>
<ul>
<li>选项</li>
<li>选项</li>
<li>选项</li>
</ul>
</li>
<li>
<a href="#">菜单</a>
<ul>
<li>选项</li>
<li>选项</li>
<li>选项</li>
</ul>
</li>
<li>
<a href="#">菜单</a>
<ul>
<li>选项</li>
<li>选项</li>
<li>选项</li>
</ul>
</li>
</div>
<script>
$(function(){
$('.nav>li').mouseover(function(){
//鼠标经过
// $(this) jquery当前元素 this不要加引号
$(this).children("ul").show();
})
//鼠标离开
$('.nav>li').mouseleave(function(){
$(this).children('ul').hide();
})
})
</script>