zoukankan      html  css  js  c++  java
  • jquery基础总结

    什么是jQuery?
            就是一个JavaScript函数库,开源的。
    jQuery能做什么
            JavaScript是做什么的,jQuery就是做什么的,Jquery是对javascript的封装。
    JQuery的特点
              1、     写少做多——Write Less,Do More
              2、     很好的解决了不同浏览器的兼容问题(css还是有问题的)
              3、     对于不同控件具有统一的操作方式
              4、     体积小,使用简单方便
              5、     链式编程、隐式迭代、插件丰富、开源、免费
              6、     让编写JavaScript程序更简单,更强大)
             优点:
              1、     轻量级
              2、     强大的选择器
              3、     出色的DOM操作的封装
              4、     可靠的事件处理机制
              5、     完善的Ajax
              6、     不污染顶级变量
              7、     出色的浏览器兼容性
              8、     链式操作方式
              9、     隐式迭代
              10、   行为层与结构层的分离
              11、   丰富的插件支持
              12、   完善的文档
              13、   开源
    jQuery中的顶级对象$
           $是jQuery的简写,可以用jQuery代替$

           window.onload(fn)和$(document).ready(fn)的区别:

     window.onload(fn) $(document).ready(fn)
    页面完全加载完毕后才会触发   只要Dom元素加载完毕就触发,提高相应速度
    每次注册新的事件都会将前面的覆盖掉    可以多次注册事件,最终都会执行

          使用jQuery实现window.onload的效果:$(window).load(fn);
    jQuery中提供的两个循环函数

    1 $.map(array,callback(element,index));对于数组array中的每个元素,调用回调函数,返回一个新的数组,原数组不变
    2                element:当前循环的数组元素
    3                Index:当前下标
    4 $.each(array,fn)
    5               遍历数组,return false退出循环
    6               使用this表示当前元素的值
    7            

    $.trim(字符串)  去掉两端的空格
     jQuery对象和Dom对象的转换
              Dom对象转换为jQuery对象:$(Dom对象)
              jQuery对象转换为Dom对象:$(Dom对象).get(0);$(Dom对象)[0];
     jQuery选择器
              Id选择器:$('#id');
              标签选择器:$('input');          $('*')获取页面上的所有元素
              属性过滤选择器:$('input[name=gender]')
              类样式选择器:$('.cls');
              标签+类选择器:$('div.cls');
              多条件选择器:$('p,div,span.menuitem')//同时选择p标签、div标签和拥有menuitem样式的span标签元素
              层次选择器:$('div li')//div下的所有li元素(所有)
                                 $('div>li')//div下直接li子元素
                                 $('.menuitem+div')//样式为menuitem之后的相邻的第一个div元素    =   $('.menuitem').next('div')
                                 $('.menuitem~div')//样式为menuitem之后的所有的兄弟div元素       =   $('.menuitem').nextAll('div')
              基本过滤选择器::first选取第一个元素     $('div:first')
                                        :last选取最后一个元素     $('div:last')
                                        :not选取不满足选择器条件的元素     $('input:not(.cls)')
                                        :even选取索引是偶数
                                        :odd选取索引是奇数
                                        $(':header')选取所有的h1——h6元素
                                        $('div:animated')选取正在执行动画的<div>元素
              属性过滤选择器:$('div[id]')//选取有id属性的div
                                        $('div[title=test]')//title属性等于test
                                        $('div[title!=test]')//title属性不等于test或没有title属性
                                        $('input[name^=n]')//name属性以n开头
                                        $('input[name$=n]')//name属性以n结尾
                                        $('input[name*=n]')//name属性包括n
              表单对象属性过滤器:$('#form1:enabled')//选取id为form1的表单内所有启用的元素
                                              $("#form1 :disabled")//选取id为form1的表单内所有禁用的元素
                                              $("input:checked”)//选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
                                             $("select :selected")选取所有选中的选项元素
              表单选择器:$(':input')//选取所有的input、textarea、select、button
                                 $(':text')//与$('input[type=text]')差不多,但有一定的区别
                                $('textarea')//错误
              可见性过滤器::hidden
              内容过滤器::contains(text)//包含指定文本的元素
                                 :empty//不包含元素或者文本的元素
                                 :has(input)//包含指定元素的元素
                                 :parent//作为父元素的元素
              子元素过滤器:     $('ul li:first');//只返回一个li元素
                                         $('ul li:first-child’);//为每个父元素ul都返回一个li
                                         :only-child,匹配当前父元素中只有一个子元素的元素
                                         :nth-child(3n),选取3的倍数的元素
                                         :nth-child(3n+1),满足3的倍数+1的元素
                                         .children()方法,只考虑子元素,不考虑后代元素
    链式编程
              注意:$('div').html('值').val('值')可以
                        $('div').html().val('值')不可以
                        括号中没有值的时候是获取值,获取值返回的是获取的字符串而不是对象,所以不能链式编程
              end()方法可以恢复链被破坏前的情况
              toggleClass('cls')切换样式的显示
              hasClass('cls')判断是否应用了某样式
              $('p:eq(0)')代表的是第一个元素
              $('p:lt(2)')前两个,索引为2之前的
              $('p:gt(2)')表示的是后两个
    获得兄弟元素的几个方法
              next();//当前元素之后的紧邻着的第一个兄弟元素
              nextAll();//当前元素之后的所有兄弟元素
              prev();//当前元素之前的紧邻着的兄弟元素
              prevAll();//当前元素之前的所有兄弟元素
              siblings();//当前元素的所有兄弟元素
    jQuery的迭代(包装集)
              if($('#btn').length<=0)
              {
                   alert("id为btn的元素不存在!");
              }
    jQuery的Dom操作
              $('a:first').html('hello');
              $('a:first').text('hello');
              $('a:first').attr('href','http://www.baidu.com');
              $('a:first').removeAttr('class');删除属性
              $('a:first').attr('class','');属性还有
    动态创建Dom节点
              $("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
              $('body').append("<a href='http://www.baidu.com'>百度</a>");
              prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
              after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
              before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)
              (*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);
              (*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);
              empty()清空某元素下的所有子节点
              remove()删除当前元素,返回值为被删除的元素
              clone()克隆节点
              $('br').replaceWith('<hr/>');用<hr/>替换br
              $('<br/>').replaceAll('hr');用<br/>元素替换所有的hr

  • 相关阅读:
    .NET 实现复制粘贴功能
    调用接口并且判断是否写日志(用一个参数来控制)
    Javascript知识——事件
    Swift开发的几个小技巧(整理自图拉鼎的博客)
    Swift 闭包表达式
    使用Xcode 的Debugging
    iOS开发中的ARC内存管理de技术要点
    iOS客户端de公共WIFI解决方案
    Crash log符号化与调试信息
    iOS NSNotificationCenter 使用姿势详解
  • 原文地址:https://www.cnblogs.com/wolf-sun/p/3205619.html
Copyright © 2011-2022 走看看