zoukankan      html  css  js  c++  java
  • 使用jQuery要注意的问题

    1. $.find()与$.children()的区别 
    有如下HTML片段: 

    复制代码代码如下:

    <div id="div_four"> 
    <input id="one"/><input id="two"/> 
    <div><input id="three"/></div> 
    </div> 


    1. find() 返回元素下所有指定元素,不限制子级的深度,如: 
    $("#div_four").find("input")//返回one、two、three三个input元素 
    2.childr() 返回元素的一级子节点元素集合,如: 
    $("#div_four").children("input")//返回one、two两个input元素 
    2. $.append()与$.appendTo()的区别 
    1. append():返回父元素的引用 
    2. appendTo():返回新创建的元素的引用 

    复制代码代码如下:

    <div id="div_1"></div> 
    var e = $("<h1>动态创建并添加表标题元素</h1>").appendTo($("#div_1")); 
    var r = $("#div_1").append("<h1>动态创建并添加表标题元素</h1>"); 
    //e 表示新创建的<h1>元素 
    //r 表示$("#div_1")元素 


    3. 动态绑定事件和静态添加事件的区别 
    有了jQuery后,给元素动态绑定事件变得很简单,但传统方式直接给元素添加事件也不能忘了,但综合了jQuery和普通JavaScript的程序在使用时必须明确jQuery动态绑定事件和静态添加事件在获得事件源对象的不同之处。 
    <p id="p1">动态绑定事件和静态添加事件的区别</p> 
    <p id="p2" onclick="fun()">动态绑定事件和静态添加事件的区别</p> 
    <p id="p3" onclick="fun2(this)">动态绑定事件和静态添加事件的区别</p> 
    //1. 动态绑定事件,this即代表事件源。如: 
    $("#p1").click(function(){ 
    alert($(this).text()); //this代码事件源 
    }); 
    //2. 静态绑定事件时,不能直接使用this。如: 
    function fun(){ 
    alert($(this).text); //不能获得<p>的内容 
    //3. 通过传递“this"后即可获得事件源 
    function fun2(obj){ 
    alert($(obj).text());//将obj包装为jQuery对象 
    4. 事件处理函数中this和$(this)的区别 
    $("#p1").click(function(){ 
    alert(this.innerHTML); //直接使用this 
    alert($(this).text()); //将this包装为jQuery对象 
    }); 
    如上代码中this代表事件源对象,但直使用this时它是HTML DOM对象; 
    $(this)可以将HTML DOM对象包装为jQuery对象,即拥有jQuery对象的属性和方法。 
    5. $.remove()和$.remove(selector)的区别 
    两种调用形式都返回方法前选择器选中的元素 
    1. remove():将自身从父元素中删除【自杀】 
    2. remove(expr):从父元素中删除某元素【他杀】 
    如: 
    var e = $("#div_2 h1").remove();//返回删除了的h1元素 
    var e = $("#div_2 h1").remove("#h2");//删除id为h2的<h1>元素,返回所有h1元素 
    6. $.eq()和$.get()的区别 
    相同点:都可获得元素集合中指定第n个元素 
    不同点: 
    1. eq(n) 返回的是jQuery对象,可以直接使用jQuery内置方法,如: 

    复制代码代码如下:

    $("#div_three a").eq(0).bind("click", function () { 
    alert($(this).text()); 
    }); 


    2. get(n) 返回的DOM Element对象,可以直接使用HTML DOM属性和方法,如: 
    $("#div_three a").get(1).onclick = function () { 
    alert($(this).text()); 
    }; 
    或将对象封装成jQuery对象达到一样的效果,如: 

    复制代码代码如下:

    $($("#div_three a").get(1)).bind("click",function () { 
    alert($(this).text()); 
    }); 


    7. $.css(properties)和$.css(name,value)的区别 
    1. 语法的区别 
    css(properties) $("p").css({color:"red"}); 或 $("p").css({"color":"red"}); 
    css(name,value) $("p").css("color":"red"); 
    2.属性名的区别 
    css(properties): 
    如果样式属性名没有用引号,则必须用JavaScript语法的css样式名:如 
    $("p").css({color:"red",fontSize:"30px"}); 
    如果改为“font-size”就没有效果 
    如果样式属性名有用引号 ,则两种样式都可以,如: 
    $("p").css({color:"red","font-size":"30px","fontWeight":"bold"}); 
    css(name,value):两种形式都可以,下面两种效果一样: 
    $("p").css("fontSize":"30px"); 
    $("p").css("font-size":"30px");

    复制自http://www.jb51.net/article/29076.htm

  • 相关阅读:
    flash制作的swc库文件如何在flex中使用
    AS关于子类父类关于侦听(addEventListener)的问题
    AS3中的Timer和Event.EnterFrame的区别
    java 将short,int,string转化成bytearray用socket发送
    一些要点
    flex中关于swf的导入注意事项
    AS3如何外部加载swf,并使用其中的元件或者类
    Winform 快速开发框架,上位机开发,工控机程序开发,CS程序开发
    Fanuc Cnc 数控系统,PC端下发NC程序到CNC端,现场测试通过。
    开箱即用的,强大的通用升级组件,五分钟移植到你新旧项目中。
  • 原文地址:https://www.cnblogs.com/darkterror/p/4997236.html
Copyright © 2011-2022 走看看