JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

来源:互联网 发布:掃描sql 编辑:程序博客网 时间:2024/05/26 05:51

image

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <table border="1">        <thead>            <tr>                <th>选项</th>                <th>ip</th>                <th>port</th>            </tr>        </thead>        <tbody id="i1">            <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>    <input type="button" value="all" onclick="checkAll()">    <input type="button" value="rev" onclick="reverse()">    <input type="button" value="can" onclick="checkNone()"></body><script src="jquery-3.2.1.js"></script><script>    function checkAll () {        $('#i1 input').prop('checked', true)//        $(':checkbox').prop('checked', true)//        实际上, 这两条都是一样的.$带出的JQuery对象只能是列表, 且是标签列表.    }    function checkNone () {        $('#i1 input').prop('checked',false)    }//    function reverse() {//        $('#i1 input').each(function (k) {//            console.log(k,this);//        })    function reverse() {    $('#i1 input').each(function () {        //三元运算, 实现反选, 选中的不选, 没选的选中        var v = (this).prop('checked')?false:true;        $(this).prop('checked',v)    })    }</script></html>

在反选里面, 我们不需要用到for循环, 而用封装好的.each(function(k){})

.each里的函数的参数k, 实际上是下标(索引序号)

function reverse() {        $('#i1 input').each(function (k) {            console.log(k,this);        })

输出的结果包含:

k  :  0 1 2 3

this: 所有inputs里面的每一个需要循环的input子标签, 而所有的this实际上都是DOM对象而不是JQ对象

image

如果要把this 转为JQ对象, 需要用$(this)包起来

三元运算:

var v = 条件? 真值:假值

学术或足球分析交流微信:chinamaths(进讨论组)

Don't hesitate to comment or add a like    -    Yours Bill Bill's技术博客 足球分析博客 足彩数据视频 比尔极客日志_博客园 比尔足球数据_网易博客 足彩TV_优酷 比尔极客日志_CSDN 比尔足球数据_新浪博客 足彩TV_搜狐视频 比尔极客日志_51CTO 比尔足球数据_新浪微博 足彩TV_喜马拉雅 比尔极客日志_开源中国 比尔足球数据_官方URL 足彩TV_56视频 比尔极客日志_GitHub 比尔足球数据_头条号 微信号:zucai99