jQuery

时间：2017-03-06 14:06:37 阅读：197 评论：0 收藏：0 [点我收藏+]

版本：
　　1.x 1.12
　　2.x
　　3.x

转换：
　　jquery对象[0] => Dom对象
　　Dom对象 => $(Dom对象)

一、查找元素

　 DOM 　　

　　繁琐　　

　　jQuery：

　选择器，直接找到某个或者某类标签　　

　　1. id

$(‘#id‘) 　　

　　2. class

　　<div class=‘c1‘></div>
　　$(".c1") 　　

　　4. 组合a

　　<div id=‘i10‘ class=‘c1‘>
　　　　<a>f</a>
　　　　<a>f</a>
　　</div>
　　<div class=‘c1‘>
　　　　<a>f</a>
　　</div>
　　<div class=‘c1‘>
　　<div class=‘c2‘> </div>
　　</div>

　　$(‘a‘)
　　$(‘.c2‘)

　　$(‘a,.c2,#i10‘)

　　5. 层级

　　　　$(‘#i10 a‘) 子子孙孙
　　　　$(‘#i10>a‘) 儿子　　

　　6. 基本

　　　　:first
　　　　:last
　　　　:eq()

　　7. 属性

　　$(‘[alex]‘) 具有alex属性的所有标签
　　$(‘[alex="123"]‘) alex属性等于123的标签

　　<input type=‘text‘/>
　　<input type=‘text‘/>
　　<input type=‘file‘/>
　　<input type=‘password‘/>

　　$("input[type=‘text‘]")
　　$(‘:text‘) 表单选择器

实例：

　　多选，反选，全选
- 选择权
-
　　$(‘#tb:checkbox‘).prop(‘checked‘); 获取值
　　$(‘#tb:checkbox‘).prop(‘checked‘, true); 设置值
-
jQuery方法内置循环： $(‘#tb:checkbox‘).xxxx

　　- $(‘#tb:checkbox‘).each(function(k){
　　// k当前索引
　　// this，DOM，当前循环的元素 $(this)

　　})
　　- var v = 条件 ? 真值 : 假值

实例

    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverseAll()">
    <input type="button" value="取消" onclick="cancelAll()">
    <table id="i1" border="1">
        <thead>
            <tr>
                <td>选项</td>
                <td>ip</td>
                <td>port</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.1.1</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.1.1</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.1.1</td>
                <td>22</td>
            </tr>

        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll(){
            $(‘#i1 :checkbox‘).prop(‘checked‘,true)
        }
        function cancelAll() {
            $(‘#i1 :checkbox‘).prop(‘checked‘,false)
        }
        function reverseAll() {
            $(‘#i1 :checkbox‘).each(function () {
                if(this.checked){
                    this.checked = false
                }else {
                    this.checked = true
                }
            })
        }

    </script>

筛选

    $(‘#i1‘).next()
    $(‘#i1‘).nextAll()

    $(‘#i1‘).nextUntil(‘#ii1‘)
    
    <div>
        <a>asdf</a>
        <a>asdf</a>
        <a id=‘i1‘>asdf</a>
        <a>asdf</a>
        <a id=‘ii1‘>asdf</a>
        <a>asdf</a>
    </div>
    
    $(‘#i1‘).prev()                #找到i1之前的一个元素
    $(‘#i1‘).prevAll()            #找到i1之前的所有元素
    $(‘#i1‘).prevUntil(‘#ii1‘)    #找到i1之前直到ii1的所有元素
    
    
    $(‘#i1‘).parent()            #找到i1的父元素
    $(‘#i1‘).parents()            #找到i1的所有祖先元素
    $(‘#i1‘).parentsUntil()        
    
    $(‘#i1‘).children()            #找到i1的孩子元素
    $(‘#i1‘).siblings()            #找到i1的兄弟元素
    $(‘#i1‘).find()                #找到i1的子孙元素
    $(‘li:eq(1)‘)
    $(‘li‘).eq(1)
    first()
    last()
    hasClass(class)  判断属否存在class

文本操作

    $(..).text()           # 获取文本内容
    $(..).text(“<a>1</a>”) # 设置文本内容
    
    $(..).html()
    $(..).html("<a>1</a>")
    
    $(..).val()
    $(..).val(..)

样式操作

    addClass
    removeClass
    toggleClass

属性操作：

    # 专门用于做自定义属性
    $(..).attr(‘n‘)        #显示属性为n的属性的值
    $(..).attr(‘n‘,‘v‘)    #将属性为n的属性的值改为v
    $(..).removeAttr(‘n‘)
    
    <input type=‘checkbox‘ id=‘i1‘  />
    
    
    # 专门用于chekbox,radio
    $(..).prop(‘checked‘)
    $(..).prop(‘checked‘, true)
    
    PS: 
        index 获取索引位置

实例：编辑表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>

</head>
<body>
        <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function  addElement() {
            $(".modal,.shadow").removeClass(‘hide‘);
        }
        function cancelModal() {
            $(".modal,.shadow").addClass(‘hide‘);
        }

//        找到点击目标行
        $(‘.edit‘).click(function () {

//            弹出编辑对话框
            $(‘.modal,.shadow‘).removeClass(‘hide‘);

//            找到当前编辑行要编辑的所有元素
            $(this).parent().prevAll().each(function () {

//                找到当前要编辑的元素的target属性值
                var target = $(this).attr(‘target‘);

//                找到当前要编辑的元素里的内容
                var text = $(this).text();


                $(‘.modal input[name="‘+target+‘"]‘).val(text)

            })


        })
        
    </script>

</body>
</html>

jQuery

原文：http://www.cnblogs.com/xone/p/6483094.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

jQuery

一、查找元素

DOM

jQuery：

1. id

2. class

3. 标签

4. 组合a

5. 层级

6. 基本

7. 属性

实例：

实例

筛选

文本操作

样式操作

属性操作：

实例：编辑表单

　 DOM 　　

　　jQuery：

　　1. id

　　2. class

　　3. 标签

　　4. 组合a

　　5. 层级

　　6. 基本

　　7. 属性