Python学习笔记第十七周

　　一、jQuery

内容：

　　一、jQuery：

　　ps:版本

　　　1.xx （推荐最新版本，兼容性好）

　　　2.xx

　　　3.xx

　　　　转换：

　　　　jQuery对象[0] => DOM对象

　　　　$(DOM对象) => jQuery对象

　　1、查找元素

　　　　基本：

　　　　1、id $('#id')

　　　　　　2、class $('.classname')

　　　　3、a标签 $('a')

　　　　　　4、$(''a,.c2',#i10) 表示同时拿到所有的a标签、class=c2的标签和id=i10的标签

　　　　　　层级：

　　　　$('#i10 a') 表示找到id=10里的所有a标签，不论层级多少都能找到

　　　　　　$('#i10>a') 表示找到id=i10后，只找到它的child的a标签

　　　　　　$('#i10+a') 表示找到id=i 10后，找到它的下一个兄弟的a标签

　　　　　　$('#i10~a') 表示找到id=i 10后，找到它的上一个兄弟的a标签

　　　　　　基本筛选器：

　　　　　　：first

　　　　　　：last

　　　　　　：eq() 索引值，从零开始

　　　　　　：not（）

　　　　　　：even 奇数行

　　　　　　：odd 偶数行

　　　　　　：gt（）

　　　　　　：lt()

　　　　　　:header 匹配 h1~h6的标题元素

　　　　　　查找：　

　　　　　　　　next() 下一个标签

　　　　　　　　prev（）上一个标签

　　　　　　　　parent（）父标签

　　　　　　　　children（）所有的孩子标签

　　　　　　　　siblings（）所有的兄弟标签

　　　　　　　　find() 查找所有的内容

　　　　　　　　nextAll()

　　　　　　　　nextUntil()

　　　　　　　　prevAll()

　　　　　　　　prevUntil()

　　　　　　　　parents()

　　　　　　　　parentsUntil()

　　　　　　　　eq()

　　　　　　　　first()

　　　　　　　　last()

　　　　　　　　hasClass()

　　　　　　属性：

　　　　　　$('[属性]') 具有所有该属性的标签

　　　　　　$('[属性=“值”]') 所有有该属性对应该值的标签

　　　　　　例子：

　　　　　　$("input[type='text']") 查找input标签里type等于text的标签

　　　　　　例子：多选、反选、取消实例

<!--实例:-->
    <!--多选/反选/全选-->
    <!-- -选择器-->
    <!-- -$(this).prop('checked')  获取值-->
    <!-- -$(this).prop('checked',false) 设置值-->
    <!-- -jQuery方法内置循环:$('[type="checkbox"]').prop('checked',true);-->
    <!-- -var  v = 条件? 真值:假值-->
    <!-- -$('[type="checkbox"]').each(function () {-->
                <!--var v = $(this).prop('checked')?false:true;//三元运算-->
                <!--$(this).prop('checked',v)-->
            <!--})-->
        <!--}  this表示DOM元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <input type="button" value="全选" onclick="checkAll();"/>
    <input type="button" value="反选" onclick="reverseAll();"/>
    <input type="button" value="取消" onclick="cancelAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll(){
            $('[type="checkbox"]').prop('checked',true);
        }
        function cancelAll(){
            $('[type=checkbox]').prop('checked',false);
        }
        function reverseAll(){
            $('[type="checkbox"]').each(function () {
                //this 代指当前循环的每一个元素
                //反选
                //DOM方式
//                if(this.checked){
//                    this.checked = false;
//                }else{
//                    this.checked = true;
//                }
                //jQuery方式
//                if($(this).prop('checked')){//prop传递一个参数表示获取状态值
//                    $(this).prop('checked',false);//prop传递两个参数表示设置值
//                }else{
//                    $(this).prop('checked',true);
//                }
                var v = $(this).prop('checked')?false:true;//三元运算
                $(this).prop('checked',v)
            })
        }
    </script>
</body>
</html>

View Code