1-1JQuery获取元素和常用方法

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()--->父元素