首页 > 代码库 > Python 学习第十七天 jQuery

Python 学习第十七天 jQuery

一,jQuery 知识详解

     利用jquery 查找元素,操作元素

1,jquery 引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">123</div>
    <script src="http://www.mamicode.com/jquery-1.12.4.js"></script>                 #下载jq文件并放到本地
    $("#id")                                                #jq引用jQuery方法或者$  $符相当于jQuery
                                                             #$("#id")利用jQuery或者i1标签 $("#id").xxxx xxxx为jQuery方法
</body>
</html>

 2,jquery和DOM之间的转换

      jquery对象[0] => DOM 对象,DOM 对象 => $(DOM对象)

 3,jquery 选择器

  1,标签选择器

     (1)根据id查找  $(‘#id‘)

   (2)根据class查找 $(".c1")

     (3)标签选择器 $(‘a‘) 选取所有的a标签

     (4)组合选择器 $(‘a,.c2,#i10‘) 找到所有的a标签和所有的class为c2的标签,以及ID为i10的标签

    2,层级选择器

  (1)$(‘#i10 a‘) 先找到id 为i10的标签,然后再找i10下面的子子孙孙a标签

  (2)$(‘#i10>a‘)只找i10下面的子标签为a为标签

  3,筛选器

  (1)$(‘#i10>a:first)找到id为i10的子标签的第一个a标签,:last 表示最后一个用法同:first

  (2)$(‘#i10 a:eq(0)‘) 找到id为i10的所有a标签并且索引值为0的a标签 :gt(index),:lt(index)用法同:eq

  4,根据属性查找

  (1)$(‘[alex]‘) 找到所有具有属性alex的标签

  (2)$(‘[alex="123"]‘) 找到具有属性alex且值为123的标签,注意双引号

  (3)$("input[type=‘text‘]") 找到所有input 标签 type属性为text的标签

  5,表单选择器

  (1)$(":test") 找到所有的input标签type属性为text的标签

  (2)$(":disabled") 找到所有表单对象中不可编辑的标签

  6,全选,反选,取消示例代码

  (1)$(‘#tb:checkbox‘).prop(‘checked‘,true) 传值表示设置值

  (2)$(‘#tb:checkbox‘).prop(‘checked‘)        没传值表示获取值

  (3)$(‘#tb:checkbox‘).xxx  jquery方法内置循环

  (4)$(‘#tb:checkbox‘).each(function(k){

      each 为jquery循环

      k为当前的索引

      this,DOM元素,指当前循环的元素 $(this)为 jquery元素

  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="http://www.mamicode.com/全选" onclick="checkAll();" />
    <input type="button" value="http://www.mamicode.com/反选" onclick="reverseAll();" />
    <input type="button" value="http://www.mamicode.com/取消"  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="http://www.mamicode.com/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 对象,需要加$() 转化为jquery对象
                /*
                if(this.checked){                   #利用DOM对象处理
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop(‘checked‘)){        #利用jquery对象处理
                    $(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>

 7,jquery操作class

 (1) $(‘#i1‘).addClass(‘hide‘) 增加hide class $(‘#i1‘).removeClass(‘hide‘)移除hide class

8,筛选器

  在筛选器中可以增加参数,例如find(“#i1”)

 (1)$(this).next() 获取当前标签的下一个标签

 (2)$(this).prev() 获取当前标签的上一个标签

 (3)$(this).parent() 获取当前标签的父标签

 (4)$(this).children()获取当前标签的子标签

   (5)$(this).sibings() 获取当前标签的兄弟标签

 (6)$(this).parent().find(“.content”) 获取父级标签的子子孙孙标签中所有的class 包含content的标签

    左侧菜单示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="http://www.mamicode.com/jquery-1.12.4.js"></script>
    <script>
        $(‘.header‘).click(function(){
            $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)

        })
    </script>
</body>
</html>

    (7)和$(‘li:eq(1)‘)类似的方法$(‘li‘).eq(1) 同.eq(1) 类似的还有first(),last(),hasClass(class)

  (8)$(‘#i1‘).next() 找到下一个 $(‘#i1‘).nextAll()找到下面所有的 $(‘#i1‘).nextUntil(‘#i1‘) 找到下面所有的知道id为i1的标签

 9,文本操作

  (1) $(..).text()  #选择器加上.text() 方法获取标签的内容

    (2) $(..).text(“<a>1</a>”) .text的括号中加上内容为修改标签的内容

  (3) $(..).html()  #获取标签

  (4) $(..).html("<a>1</a>") #设置标签内容

  (5) $.(..).val()  #获取值

  (6) $.(..).val()  #设置值

 10,样式操作

<script>                                                  #开关灯代码
    $(‘#i1‘).click(function(){
            if($(‘.c1‘).hasClass(‘hide‘)){              
                $(‘.c1‘).removeClass(‘hide‘);
            }else
                $(‘.c1‘).addClass(‘hide‘);
            $(‘.c1‘).toggleClass(‘hide‘)              #用一句可以替代上面的if{}else{}语句
    })
</script>

 11,自定义属性的操作

 (1)$(..).attr 

     $(..).attr(‘n‘) 获取自定属性的值  例$(‘#i1‘).attr(‘file‘)获取id为i1的标签的file 属性的值

     $(..).attr(‘n‘,‘v‘) 为标签n 属性设置值为v

     $(..).removeAttr(‘n‘) 取标签的n属性

 (2)$(..).prop 用于checkbox,radio选中操作 用法同attr

 12,CSS  cursor:pointer; 点击设置为小手

 13,增加标签

    <script>
        $(‘#a1‘).click(function () {
            var v = $(‘#t1‘).val();

            var temp = "<li>" + v + "</li>";
            // $(‘#u1‘).append(temp);                 #在获取的标签下面添加标签
            $(‘#u1‘).prepend(temp);                   #在获取的标签的上面添加标签
            // $(‘#u1‘).after(temp)                      #在最外边的后面添加标签
            // $(‘#u1‘).before(temp)                    #在最外边的上面添加标签
        });

        $(‘#a2‘).click(function () {
            var index = $(‘#t1‘).val();
            //$(‘#u1 li‘).eq(index).remove();        #删除文本内容
            //$(‘#u1 li‘).eq(index).empty();          #清空文本内容
        });
        $(‘#a3‘).click(function () {
            var index = $(‘#t1‘).val();
            var v = $(‘#u1 li‘).eq(index).clone();
            $(‘#u1‘).append(v);


            //$(‘#u1 li‘).eq(index).remove();
            //$(‘#u1 li‘).eq(index).empty();
        })                

 14 ,滚轮设置

 (1) scrollTop([val]) 上线滚轮

 (2)scrollLeft([val])  左右滚轮

 15,事件绑定

 (1) $(‘.c1‘).click()  绑定click事件

 (2) $(‘.c1‘).bind(‘click‘,function(){}) 绑定click事件

   (3) $(‘.c1‘).unbind(‘click‘,function(){}) 解绑定

 (4) $(‘.c1‘).delegate(‘a‘,‘click‘,function(){}) 给c1下面的所有的a标签绑定一个事件,以委托的方式绑定

 (5) $(‘.c1‘).undelegate(‘a‘,‘click‘,function(){}) 给c1下面的所有的a标签解绑定

 (6) $(‘.c1‘).on(‘click‘.function(){}) 给c1绑定click事件

 (7) $(‘.c1‘).off(‘click‘,function(){}) 给c1解绑定click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="http://www.mamicode.com/jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;                             #绑定事件执行
        }
        $(‘#i1‘).click(function () {
            alert(456);
            return false;                             #绑定事件不执行
        })
    </script>
</body>
</html>

 

Python 学习第十七天 jQuery