jQuery学习总结（二）、ready函数、#idName选择器、class选择器、html元素选择器、祖先后代选择器、父子选择器

一、ready（Fun）函数

jQuery的ready（Fun）函数由一个合法的jQuery对象调用，含义是这个对象准备好了，自动执行ready函数的入参函数，此函数被视为自动执行函数

示例：

$('input').ready(function(){

    $('input').get(0),value ="初始值"

})

在需要文档准备好后自动执行某些js操作：

   $(document).ready(function(){

             js操作.....

})也可以简写为 $(function(){.....js 操作....})

实例：使用ready修改已经定义好的值

   <script>
        $('#p_1').ready(function() {
            $('#p_1').get(0).value = "水浒传"
        })
    </script>
//后面的代码是在body中
    名著1:<input type="text" value="三国演义" id="p_1"><br> 
    名著2:<input type="text" value="红楼梦" id="p_2"><br> 
    名著3:<input type="text" value="西游记"><br>

二、#idName选择器

#选择器是jQuery获取以id属性为唯一名称元素的选择器，#选择器获取的返回对象是一个唯一的jQuery对象或者空对象（id没有匹配）

示例：

$('#name')  //单引号双引号都是可以的

注意：在同一个上下文元素属性中，id的值应该唯一

实例：点击按钮，交换两个元素的位置

    <input type="text" value="小石潭记" id="book1"><br>
    <input type="text" value="卖炭翁" id="book2"><br>
    <button id="change" onclick="sclick('change')">交换</button>
    <button id="reume" onclick="sclick('reume')" disabled>恢复</button>
    <script>
        function sclick(arg) {
            var temp = $('#book1').val()
            $('#book1').val($('#book2').val())
            $('#book2').val(temp)
            if (arg === 'change') {
                $('#change')[0].disabled = true
                $('#reume')[0].disabled = false
            } else {
                $('reume')[0].disabled = true
                $('#change').get(0).disabled = false
            }
        }
    </script>

三、class选择器

类选择器与id选择器有所不同的是，经常用此方式获取具有相同class属性名称的一组jQuery元素对象，如果有，则以封装在数组中返回

 示例：

var books=$('c_1')

实例：

获取某个具有class值的元素并显示数量

    名著1:<input type="text" class="c_1 c_2" value="三国演义" id="p_1"><br> 
    名著2:<input type="text" class="c_1 c_3" value="红楼梦" id="p_2"><br> 
    名著3:<input type="text" class="c_1 p_2" value="西游记"><br> 
    请选择书籍：<select name="" id="">
        <option value="">--请选择你想阅读那个书籍--</option><br>
        <option value="">计算机网络</option><br>
        <option value="">计算机组成原理</option>
    </select><br>
    <button onclick="getEil()">获取c_1类的所有元素</button>
    <script>
        function getEil() {
            var claArr = $('.c_1')
            alert("符合class为c_1的有" + claArr.length)
            claArr.each(function(i) {
                if (this.tagName == 'INPUT') {
                    alert("这是一个input元素:" + claArr[i].value)
                } else {
                    alert("这不是一个input元素")
                }
            })
        }
    </script>

四、html元素选择器

根据给定的元素名匹配所有元素，返回数组对象，如果没有匹配则返回大小为0的空数组，通常此方法适合获取一个以上的同名称元素

示例：

$('div')    //获取当前所有div元素，返回封装div元素的数组

    <div>第一个</div>
    <div>第二个</div>
    <script>
        alert("div元素的个数为：" + ($('div').length))
    </script>

结果截图：

 五、ancestor-descendant选择器（也叫祖先后代选择器）

在祖先元素下匹配所有的后代

参数说明：

ancestor：任何有效的选择器

descendant：欲匹配的ancestor后代选择器 

示例：

var imgs =$('#i img')   //意思就是说  获取id名称为i元素的所有img后代元素

提示：

选择器的后代包括所有匹配在祖先下的任何层次的元素

    <div>
        <p>这是一个p标签</p>
        <p>这是第二个p标签</p>
    </div>
    <script>
        var ps = $('div p')
        ps.each(function(i) {
            alert("这是p标签内的内容:" + this.innerHTML)
        })
    </script>

运行的结果截图：

 六、parent>child 选择器

父元素下匹配所有的子元素，返回数组对象

参数：

parent：父代选择器

child： 在父代中匹配的选择器

示例：

var inputs =$('form >input')   //获取form元素所有直接input子元素

注意：  此选择器匹配范围只限于直接子元素，范围要比祖先后代选择器小很多

    <form action="">
        <input value="form中的直接子元素"></input>
        <div><input type="text" value="div的直接子元素"></div>
    </form>
    <script>
        var a = $('form>input').val()
        alert(a)
    </script>

 结果截图：

 综合例子（祖先后代、父子选择器）：

 获取一个标签元素的所有后代，获取一个标签元素的直接后代

   <h2>Form1中input元素</h2>
    <form action="" id="f1">
        名著1:<input type="text" value="三国演义" id="p_1"><br> 
        名著2:<input type="text" value="红楼梦" id="p_2"><br> 
        名著3:<input type="text" value="西游记"><br>
        <div>
            名著4:<input type="text" value="牡丹亭" id="p_2"><br>
            名著5：<input type="text" value="儒林外史" id="p_2"><br>
        </div>
    </form><br>
    <button onclick="getInput1()">获取form1中所有input后代元素</button>
    <h2>Form2中input元素</h2>
    <form action="" id="f2">
        作者1:<input type="text" id="book1" value="无名氏"><br>
        作者2:<input type="text" id="book2" value="曹雪芹"><br>
        作者3:<input type="text" id="book3" value="施耐庵"><br>
        <div>
            作者4:<input type="text" id="book4" value="吴敬梓"><br>
            作者5:<input type="text" id="book5" value="汤显祖"><br>
        </div>
    </form>
    <button onclick="getInput2()">获取form2中直接input元素</button>
    <script>
        function getInput1() {
            var getInput1 = $('#f1 input')
            getInput1.each(function(i) {
                alert(this.value)
            })
        }

        function getInput2() {
            var getInput2 = $('#f2 >input')
            getInput2.each(function() {
                alert(this.value)
            })
        }
    </script>

七、prev+next选择器与prev~siblings同辈元素选择器

  prev+next选择器：

匹配所有紧接在prev元素后的next元素，包含任何层级prev有效

参数：

prev：有效的选择器

next：紧接着prev后面的选择器（唯一，只有一个）

示例：

$('label+input')   //匹配所有层级label元素后第一个input元素

$('label+.c_1')   //匹配所有层级label元素后第一个class为c_1的元素

prev~siblings同辈元素选择器：

匹配prev元素之后的同辈所有siblings元素选择器

参数：

prev：有效选择器

siblings：所有与prev同辈之后的选择器

两个对比实例：

    <form action="">
        <input type="text">
        <input type="text">
    </form>
    <input type="text" name="birth" value="form后的元素">
    <input type="text" namr="second" value="form后的元素，和name同辈">
    <script>
        var a = $('form~input') //返回两个input元素,birth、second
        var b = $('form+input') //返回name为birth的元素
    </script>

八、其他类型选择器

:first      获取第一个元素              用法:$('li:first')

:last      获取最后一个元素          用法:$('li:first')

:not(selector)   去除所有与给定选择器匹配的元素    用法:$("input:not(:p)")

:even       匹配所有索引值为偶数的元素，从0开始    用法:$("tr:even")

:odd        匹配所有索引值为奇数的元素，从1开始    用法:$("tr:odd")

:eq(index)     匹配一个给定索引值的元素           用法: $("tr:eq(1)")

:gt(index)      匹配所有大于给定索引值的元素        用法:$("tr:gt(0)")

:It(index)      匹配所有小于给定索引值的元素      用法: $("tr:It(2)")

:contains(text)   匹配包含给定文本的元素      用法:$("div:contains('java')")

:empty       匹配所有不包含子元素或者文本的空元素     用法:$("td:empty")

:has(selector)    匹配含有选择器所匹配的元素的元素    用法:$("div:has(p)").adClass("test")

:parent    匹配含有子元素或者文本元素              用法:$("td:parent")

:hidden   匹配所有不可见元素或者type为hidden的元素     用法:$("td:hidden")