JQuery笔记2-选择器
程序员文章站
2022-07-13 11:59:35
...
JQ中的选择器
JQ中的选择器和C3中的选择器非常相似,可以说如果会C3的选择器,那么就会JQ的选择器.例如:JQ中获取元素的方式：通过各种选择器来获取元素
- 根据id—$(’#id’) ----- 一个元素
- 根据标签名—$(‘标签名’)----多个元素
- 根据类样式的名字（类选择器）---- $(’.class’)–多个元素
JQ中常用的几个方法
- .html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
- .text()方法,设置标签中间显示的文本内容,类似于innerText
- .val()方法.设置input标签中value的值,类似于value
- .css()方法,.设置元素的样式,类似于style
JQ中的.css()方法
JQ操作样式就要用.css()方法,而操作样式有三种方式:
- 当里面只写两个参数:
$('div').css('backgroundColor','red') - 键值对:
$('div').css({width:'20px',height:'30px'}) - 链式编程:
$('div').css('width','20px').css('height','30px')
三种方式的区别:只有两个参数这种写方法需要没设置一个样式就需要多些一行代码,键值对的方式和写css中的style就特别像了,链式编程就体现了JQ的特点.
JQ中的其他主要选择器
- 多条件选择器(同时选择多个元素):
$('span, p, li, div') - 奇数偶数选择器(选择第奇数个或第偶数个,exen为偶数,odd为奇数,但是是从索引0开始的):
$('#uu>li:even'),$('#uu>li:odd') - 层级选择器
3.1 后代选择器(所有后代包括子孙):$('#dv p')
3.2 子元素选择器(直接的后代):$('#dv>p')
3.3 获取的是div后面的第一个p标签元素$("#dv+p")
3.4 获取的是div后面所有直接的兄弟元素p标签元素$("#dv~p") - 标签+类选择器:
$('li.cls') - 索引选择器(等于4,大于4,小于4):
$('#uu>li:eq(4)'),$('#uu>li:gt(4)'),$('#uu>li:lt(4)') - id选择器:
$('#btn') - 类选择器:
$('.btn') - 标签选择器:
$('p')
其他常用的函数
- 获取当前元素的所有兄弟元素:
siblings() - 获取子元素(一层):
children('标签名') - 查找当前元素下的元素:
find('标签名') - 显示隐藏盒子:
show(),hide() - 显示盒子淡入:
fadeIn() - 隐藏盒子淡出:
fadeOut()
几个小demo
- 精品展示:
- 好友面板切换
- 下拉菜单
- 手风琴
这里只展示两个:好友面板切换:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#uu li {
margin-bottom: 10px;
background-color: Orange;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
}
#uu li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#uu li ul li {
background-color: pink;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
//找到id为ul的下面的li里面的ul里面的li全部隐藏
$("#uu>li>ul>li").hide();
//找到id为ul的直接的子元素li,注册点击事件
$('#uu>li').click(function () {
//兄弟li中的ul下面的li全部隐藏
$(this).siblings('li').children('ul').find('li').hide(250);
//当前点击的li中的ul里面的li全部显示
$(this).children('ul').find('li').fadeIn(500);
});
});
</script>
</head>
<body>
<!--box-shadow: 0px 0px 4px 3px inset rgba(255, 0, 0, 0.3) 如果不指定inset 默认阴影向外-->
<div style=" width:200px; height:500px; border:1px solid red; box-shadow: 0px 0px 4px 3px rgba(255, 0, 0, 0.3)">
<ul id="uu" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>川普</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: purple;
}
.wrap li{
background-color: yellow;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
background-color: yellow;
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
$(function () {
//获取.wrap下面的ul中的li,注册鼠标进入和离开的事件
$('.wrap>ul>li').mouseover(function () {
//鼠标进入
$(this).children("ul").show();
var ul = $(this).children("ul");
ul.children('li').children('a').click(function () {
var x = $(this).text();
console.log(x === '乔峰');
});
});
$('.wrap>ul>li').mouseout(function () {
$(this).children("ul").hide();
});
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">帅哥系列</a>
<ul>
<li><a href="javascript:void(0);">乔峰</a></li>
<li><a href="javascript:void(0);">张无忌</a></li>
<li><a href="javascript:void(0);">郭靖</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">美女系列</a>
<ul>
<li><a href="javascript:void(0);">柳 岩</a></li>
<li><a href="javascript:void(0);">杨 幂</a></li>
<li><a href="javascript:void(0);">萝 拉</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">渣男妇腐女</a>
<ul>
<li><a href="javascript:void(0);">凤姐</a></li>
<li><a href="javascript:void(0);">助教</a></li>
<li><a href="javascript:void(0);">导师</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>