python jQuery

http://jquery.cuishifeng.cn/      　　前7个标签比了解

格式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<line rel='stylesheet' href='csswenjian'></line>
	<style>
		
	</style>
</head>
<body>
<div id='i1'>123</div>
<script src='jquery-1.12.4.js'></script>
 jQuery.  //显示有关jquery的属性
 $.    //引入jquery-1.12.4.js后$代表jQuery
 $('#i1') 	
</body>
</html>

选择器：$('....')

筛选器：$(this).next() 下一个    $(this).prev  上一个    $(this).parent()  父     $(this).children() 孩     $(this).siblings() 获取兄弟标签    如： $(‘#i1’).siblings()

dom与jquery转换：

jquery对象[0]->dom对象

dom对象->$(dom对象)

 实例1：全选、反选、取消操作

<!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="cancleAll();"/>

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">

            <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() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指当前循环的每一个元素
                // Dom
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */
              // 三元运算var v = 条件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

　注：$('#tb :checkbox').prop('checked'，true); 不传值表示获取值，传值表示设置值。

           jquery 内置循环：$(':checkbox').each(）

    三元运算 var v = 条件? 真值：假值
posted @ 2018-10-25 17:18  python|一路向前  阅读(647)  评论(0)  编辑  收藏  举报