jQuery获取元素的方式:通过各种选择器来获取元素
(类似于css获取标签)基本选择器
1.根据id来获取--------------->id选择器 ---->
$("#id的值");一个
2.根据标签的名字来获取--->标签选择器--->$("标签的名字");多个
3.根据类样式的名字获取--->类选择器--->$(".类样式的名字");多个
4.标签+类选择器------->$('标签名字.类样式的名字')
5.多条件选择器--------->$()(相当于css的并集选择器)层级选择器
1.后代选择器---------->
$("选择器1 选择器2")
2.子选择器---------------->$("选择器1>选择器2")
3.兄弟选择器1------------>$("选择器1+选择器2")紧跟
4.兄弟选择器2------------>$("选择器1~选择器2")所有基本筛选器
1、匹配索引值为偶数的元素------>
$(":even")(索引值从0开始)
2、匹配索引值为奇数的元素------>$(":odd")(索引值从0开始)
3、匹配一个给定索引值的元素---->$(":eq(索引)")
-例如$("ul>li:eq(3)")表示选择ul中的第四个li
4、匹配所有大于给定索引值的元素->$(":gt(索引)")
-例如$("ul>li:gt(3)")表示选择ul中的大于第四个li的标签
5、匹配所有小于给定索引值的元素->$(":lt(索引)")
<input type="button" name="" value="隔行变色" id="btn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
// 页面加载事件
$(function () {
// 注册点击事件
$('#btn').click(function () {
// 选择偶数行
$('ul>li:odd').css('background', 'red');
});
$('#btn').click(function () {
// 选择奇数行
$('ul>li:even').css('background', 'yellow');
});
});
常用方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.html()如果小括号中写内容,就是设置文字内容,如果小括号什么也不写,表示的是获取这个元素中的文字内容
.text()方法,设置标签中间显示的文本内容,类似于innerText
.text()如果小括号中写内容,就是设置元素内容,如果小括号什么也不写,表示的是获取这个元素中的元素内容
.val()方法.设置input标签中value的值,类似于value
.val()小括号中写内容就是设置元素的value属性，不写就是获取元素的value属性的值
.css()方法,.设置元素的样式,类似于style
该方法如果只是设置一个样式的属性和值,那么这个方法写两个参数,第一个参数是属性,第二个参数是值;多个样式采取键值对的形式；想要获取某个属性的值.css('属性名')即可
$('#box').css('width', '200px'); 如果只设置一个样式的话，可以这样写两个参数
如果设置多个参数，需使用键值对的方式
$('#box').css({'height':'300px', 'background-color': 'orange', 'color': 'red'});
.show(过渡时间)
.hide(过渡时间)
.children('选择器')------》直接子元素
.find('选择器')--------->后代子元素
.siblings()
.index()
//找到当前元素里面的一些其他元素
first();//获取元素列表中的第一个元素
last();//获取元素列表中的最后一个元素
parent()--->父元素
