zoukankan      html  css  js  c++  java
  • python学习之路7 前端学习4 jQuery 学习

    转换:

       jquery 对象[0]  => Dom对象

           $(Dom 对象 )        => jquery 对象

    1.id

      $("#id")

    2.class

     $(".cn")

    3.获取标签中的所有有A标签

      $('a')

     4.获取多个标签的集合

    $("a,.cn.#in")

    5.层级

     $("#in a")  id为n的所有a标签

     $("#in>a") 儿子层级

    6.索引

    $("#i10 a:eq(2)")     id为i10的 索引值为2的a标签

     还有就是 :first   /   :last

    7.筛选属性

     $('[alex]')

        $("[alex=value]")

      简写 : $(" :value")

    8.在标签中设置disabled可以设置成不可编辑

    $(" :disabled") => 可以找到所有disabled的标签

    9.小实例:多选与反选

    <body>
       <input type="button" value="全选" onclick="checkAll1();">
       <input type="button" value="反选"   onclick="reverseAll1();">
       <input type="button" value="取消"  onclick="cancelAll1();">
    
       <table border="1">
           <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>
                        尾巴
                    </th>
                </tr>
           </thead>
           <tbody>
           <tr>
               <td><input type="checkbox" > </td>
               <td>2</td>
               <td>3</td>
           </tr>
           <tr>
               <td><input type="checkbox" ></td>
               <td>2</td>
               <td>3</td>
           </tr>
           <tr>
               <td><input type="checkbox"></td>
               <td>2</td>
               <td>3</td>
           </tr>
           </tbody>
       </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
           function checkAll1(){
                    $(":checkbox").prop("checked",true);
                }
           function reverseAll1(){
                    $(":checkbox").each(function(){
    //                    var v= (this.checked)?false:true;
    //                    this.checked=v;
                          var v=$(this).prop("checked")?false:true;
                          $(this).prop("checked",v);
    
                    })
                }
           function cancelAll1(){
                    $(":checkbox").prop("checked",false);
                }
        </script>
    
    </body>

      10.筛选器

    $(this).next()      下一个
    .nextAll()
    .nextUntil()
    $(this).prev() 上一个
    $(this).parent() 父
    .parents() 祖宗都找出来
    .parentsUntil 直到某个祖宗
    $(this).children() 孩子
    $('#i1').siblings() 兄弟
    $('#i1').find('#i1') 子子孙孙中查找
    jQuery支持链式编程,在一行代码中执行多个功能!
    $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

    11. 文本操作

    纯文本:

     $( ).text() #获取文本内容

    $( ).text(“a")#设置文本内容

    带标签: 

    $( ).html() #获取文本内容

    $( ).html(“标签")#设置文本内容

    $().val() 获取value

    $().val("a") shevalue

     $(this).index(); //获取当前该值在里面的索引

    添加内容:

            $('#a1').click(function () {
                var v = $('#t1').val();
    
                var temp = "<li>" + v + "</li>";
                // $('#u1').append(temp);
                $('#u1').prepend(temp);
                // $('#u1').after(temp)  //下一级
                // $('#u1').before(temp) //上一级
            });
    
    
    删除
                $('#u1 li').eq(index).remove();
                //$('#u1 li').eq(index).empty();
    鼠标变成小手指
    cursor: pointer;

     复制

                var index = $('#t1').val();
    
                var v = $('#u1 li').eq(index).clone();
                $('#u1').append(v);

     直接的样式添加:

    css处理

    $().css("样式名字","样式值”)

    点赞显示的小实例:

    我们可以针对这个div给一个滑轮

    在css中,overflow:auto 进行添加

    获取当前窗口的滑轮高度

    $().scrollTop() // 可以在scrollTop中赋值进行位置的移动;

    offset  指定标签在html中的坐标; //$().offset();

    position 指定标签在父标签的坐标;

    $() .height()   #纯高度 不包括边界

    $().innerHeight()   #获取边框加上纯高度

    $().innerHeight()  #外边距

    $().innerHeight(true) #内边距

    事件绑定

    $().bind("click",function(){})

    $().unbind("click",function(){})

     $().delegate("a","click",function(){}) //对某个标签下的所有子标签绑定

    同样也有undelegate

    $().on("click",function(){})

    $().off("click",function(){})

    //当框架加载完成之后进行操作 

    $(function(){})

    jquery扩展的两种方式:

    
            $.fn.extend({
                "hanyang": function () {
                    return 'db';
                }
            });
            var v = $('#i1').hanyang();
            alert(v);
    
            $.extend({
                'wangsen': function () {
                    return 'sb';
                }
            });
            var v = $.wangsen();
            alert(v);

     jQuery 扩展

     -$.extend     $.方法

    - $.fn.extend  $().方法

    我们通常用扩展的时候都会用自执行函数,封装变量;

    
    

    

  • 相关阅读:
    QListView和QListWidget的区别
    Qt下QTableWidget的使用
    用c++封装linux系统调用
    读写锁的简单示例
    SQL 使用序列
    SQL 事务
    SQL ALTER TABLE 命令
    SQL 语句快速参考
    java中三种常见内存溢出错误的处理方法(good)
    Java 内存溢出(java.lang.OutOfMemoryError)的常见情况和处理方式总结
  • 原文地址:https://www.cnblogs.com/shidi/p/7631307.html
Copyright © 2011-2022 走看看