zoukankan      html  css  js  c++  java
  • jquery基础2

    • 属性操作

    attr():可以设置和获取某个元素的属性值,有两种用法:$("xx").attr("attr","value|fn.."),基于json的数据格式$("xx").attr({"attr":"value","xx":"xx"})

    可以使用$("xx").removeAttr("attr")来移除属性

    data:jquery1.4后新增使用data("xx","xx")可以隐式的为某个标签元素设置属性值

    通过使用表头的title属性将表格组装成一个个的对象。

    addClass():添加样式,removeClass():移除样式,hasClass(""):判断是否有样式.实现鼠标移动的样式的添加和删除:$("xx").mouseover(function(){$(this).addClass("xx");}).mouseout(function(){$(this).removeClass("xx");}),toggleClass()实现add和remove的功能

    样式:.css()方法实现为元素添加样式,还有一些方法如:height(),width()可实现常用的样式的操作。

    • 节点操作

    html()获取文本和标签,text()只获取文本内容不获取标签内容

    detach():从包裝集删除

    empty():清除元素

    使用$("xx").before("xx").remove()可模拟出节点替换的效果replaceWith()返回原有包裝集

    • 表单操作

    为input的checkbox赋值:$("input(name='checkbox')).val(["xx","xx"])val里面只能传入数组

    赋值:为checkbox,radio,select设置值.val()方法

    checkbox全选功能:$("#all").click(funciton(){//为全选按钮添加点击事件

                if($(this).prop("checked"){//判断全选按钮是否被选中

                  $("input[type='checkbox'].prop('checked',true);//如果被选中则设置所有的checkbox选中状态

                }esle{

                  $("input[type='checkbox'].prop('checked',false);//否则取消全选状态

                }

            });

    checkbox的反选功能:$("reverse").click(function(){

                  var isChecked = $("input[type='chcekbox']:not("#all):checked)");//获取选中的选项

                  var notChecked = $("input[type='checkboc']:not("#all):not(checked)");//获取未选中的选项

                  isChecked.prop("checked",false);//选中的选项设置为未选中

                  notChecked.prop("checked",true);//未选中的设置为选中状态

                })

    • 事件

     事件:event?event:window.event,事件源:event.target?event.target:event.srcElement,DOM0阻止事件冒泡event.stopPropagation(),IE通过event.cancelBubble =true;

    bind():$("xx").bind("event",function(event){

      event.stopPropagation()//阻止事件冒泡

      event.preventDefault()

    })

    one():只会执行一次

    bind():可通过在中间加空格来绑定多个事件.bind()事件没有办法为新增的元素添加绑定事件,使用live()可解决这个问题,事件委托机制

    live():live方法的开销大,closest():查找最近的元素,live()方法的第二个参数可指定执行的上下文

    delegate():事件委派

    jquery1.8后使用on()来替代bind,live,delegate,$("xx").on("event",function(event){})-->bind(),$("xx").on("event","xx", function(event){})-->delegate()

    鼠标事件:

      mouseover(),mouseout(),mouserenter(),mouseleave(),hover()

    动画效果:animate()

    jquery解决冲突问题:在jquery中$符号是jQuery对象的别名引用,然而在其他的js框架中有时也是习惯使用$符号来引用对象,此时就会带来冲突问题,因此在jquery中提供的一个方法来关闭$符号的引用,即:jQuery.noConflict();当调用这个方法后,$就不再是jQuery对象的引用了,只能用jQuery来引用jquery对象。把jQuery.noConflict()方法的返回对象赋值给一个变量,此后这个变量就可取代$符合来引用jQuery对象了,如:var $j = jQuery.noConflict(); $j("xx")等价于jQuery("xx").

    •  工具集

      browser:用于判断浏览器类型(safari,msie,firefox,opera), alert($.browser.msie);

      extend:实现值的复制,extend(object1,object2),会将object2的值复制到object1中返回新的值,object1变为新的值,extend(vo,o1,o2)o2复制到o1,把新的值赋值给vo并返回vo,o1值不变

      grep:过滤函数var num = $.grep([1,2,3,4],function(n,i){//n代表元素,i代表索引值

              return n%2==0;          

             })  //num为一个数组[2,4]

             var istr = $.grep($("table tr"),function(n,i){

                return $(n).find("td").is(":contains('xx')");//返回td中包含xx值的tr

             })

      inArray:用于判断某个元素是否在某个数组中,$.inArray(1,[1,2,3])如果存在则返回元素所在的小标值(从0开始)否则返回-1。

      map,merge

      param:对象序列化

  • 相关阅读:
    .net 文件夹是否存在的判断
    Lock Statement And Thread Synchronization
    如何利用EnteLib Unity Interception Extension 和PIAB实现Transaction
    OSQL 命令行工具
    How to build tab sets whitch headers display at bottom in WPF?
    Monitoring Clipboard Activity in C#
    产品经理讲座的感悟
    图说
    解决技术问题的9点建议
    为啥要整理需求?
  • 原文地址:https://www.cnblogs.com/charleszhang1988/p/2990921.html
Copyright © 2011-2022 走看看