关于JQuery的技巧、易错点(连载中.....)

  JQuery的诞生让我们对原生态的js代码变得陌生起来,不得不说,他真的是很强大,接下来博主就浅谈一下我对JQuery的一些认知和小tips。

JQuery:他是一个JavaScript库,他将原生态的js代码封装成若干功能强大,使用便捷的方法,对于我们工程师来说,只需要知道基本的js语法,

然后会调用JQuery方法就行了。接下来我们就聊一下JQuery中那些容易理解错的属性、方法

  

  1.首先,是选择器

  $("div,span,p.myClass"); 这是取出 所有div span 和 class名叫 myClass 的p标签 , 这里经常会有朋友在书写/检查代码时,

习惯性的认为自己选中的是div中的span、p标签。而忽略了div外部的,这种多条件的选择器,容易记错。了解的语言太多,难免会混。

  $("tr:eq(1)");只要是带索引值的东西,都可以选中,这个就是直接按索引值选择,选中索引值为1的元素。eq的索引是从0开始计算的。

$("ul li:nth-child(2)") 这是选中每个ul的第二个li,注意他从1算,而eq从0算。而且nth-child 是选中所有ul中的第二个子元素

$("div:nth-of-type(2)"); nth-of-type 他是选中 父容器div中,同一类标签名(这里是至少有2个);而且在div中位置最靠前的;

    第二个子元素。他的限制条件很多,经常有同志选中的元素并不是最靠前的,从而为达到预期而出错。

2.其次,是事件

  文档就绪函数ready():

    $(document).ready(function(){ // 在这里写你的代码... }); 作用是,处理完完HTML代码后再加在js代码

    避免出现js代码无法取到HTML代码的情况 

    $(function(){}); 这是文档就绪函数的简写形式,通过匿名函数的写法

  他与window.onload()方法的区别:

    (1)window.onload需要在网页所有内容都加载完成后才能执行,包括那些视频之类的;而

  文档就绪函数只要dom结构加载完成就可以执行

    (2)window.onload如果写了好几个,只会执行最后一个,但是文档就绪函数不会,他每个

  都会执行

  

  事件绑定函数on():   

    on(events,[selector],[data],fn)给元素绑定一个或多个事件的事件处理函数,on的使用十分灵活,当然也容易出错

      

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

      console.log($(this).html());

    })

    这是最基本的事件绑定方式,只使用了event和function两个参数

    $("button").on("mouseover click",function(){

      console.log($(this).html());

    })

    mouseover和click事件都可以触发回调函数,实现多个事件绑定一个函数

    $("button").on("click",{name:"我"},function(event){

      console.log(event.data.name);

    })

      这是调用函数时,传入参数。注意:event是一个默认的形参,不写是默认有的,如果我们自身定义形参,

    那必须写上event,因为传参时默认先给event。所以,这里,经常会有朋友不注意,然后导致传参混乱出错。

      注意这里打印出来的内容,clientX:72 clientY:20 这是取得了鼠标的坐标;which:1 是鼠标左键点击的

    这些属性还是很常用的,初学者可以常识多运用练习一番

 

    $("button").on({

      click:function(){

      console.log("click");

    },

    mouseover:function(){

        console.log("mouseover");

      }

    })

    同时实现同一个元素,多个事件,分别绑定自己的事件函数

    $("body").on("click","button",function(){

      alert("1");

})

  这是事件委派,是将原本要绑定到某元素上的事件,绑定到父容器乃至根节点上,然后再委托到想绑定事

件的子节点上就是比如阿贾克斯里面,如果页面新增加了一些标签,他们想带上咱原来设置的一些事件,那

就用这个。意思是 选中父容器,再选中父容器中的子元素,就会使在这个父容器中新增的所有子元素也会

带上这个 绑定的事件。因为那些新增的元素,默认是无法绑定以前的事件的

3.原生dom与jQuery对象之间的相互转换

   (1)原生dom转jQuery对象

       console.log($("p").hide(2000));

      这是通过$(“选择器”),通过这种方式将HTML代码转换掉

   (2)jQuery转原生dom对象

       $("p")[1].style.color="red";

     因为jQuery是把原生的js代码以对象的形式存到自己的数组中。所以,直接在 $("p")[1]

     以这个数组的形式,直接确定要修改哪一个HTML标签就可以了

       $("p").get(0).style.color="blue";

       或者也可以用上述的方法直接改,直接用get()这个方法去取对象中的元素

    例:$("p").css({"color":"yellow","background-color":"blue","font-size":"55px"});

    此例是用js的方式修改所有p标签的样式,前面是通过jQuery选中了所有的p标签。

    这里得格外注意,经常会有朋友将二者混在一起,js与jQuery代码混杂,产生错误。

    当然,这样使用虽然在有些场合十分便捷,还是不建议新手使用,没有分的很清晰的,最好别大量使用

以上,是博主曾经遇到过的一些比较典型的问题,以后还会不断完善,也希望广大朋友们能来共同探讨,相互学习。

  

时间: 2024-11-03 20:04:51

关于JQuery的技巧、易错点(连载中.....)的相关文章

JQuery中的小技巧,,,连载中。。。

获取下拉框中选中项的文本等操作 jQuery获取Select元素,并选择的Text和Value:  1.获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 2.获取select选中的 value: $("#ddlRegType ").val(); $("#select_id").change(function(){//code...}); /

关于Verilog HDL的一些技巧、易错、易忘点(不定期更新)

本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇: 组合逻辑输出类型选择; 语法上的变量交换; ·易忘篇: case/casex/casez语句; 循环语句: 数制和操作符: 数据类型: ·易错: 技巧篇: 1.组合逻辑输出:描述一个纯组合逻辑电路时,尽量不要把输出定义成输出类型,例如描述下面的电路: 1 module mux #(paramet

常用的jQuery前端技巧收集

调试时巧用console.log(),这比用alert()方便多了. jquery易错点:元素拼接的时候,元素还未添加到DOM,就用该预添加元素操作. ajax动态获取的数据,还没有装载html元素,下面就开始用预拼凑的元素操作. <li onclick="Show('10')">    <a href='javascript:void()'>提交</a></li> 这样写,点击"提交"的时候,会报错"Unc

js基础知识易错点(一)

最近替另一个项目招人,要求基础知识好,随便问了一些基础题,发现了一些易错的点,总结一下. 1.判断一个空数组 var arr = []; 1)JSON.stringify(arr) == "[]" 2)arr instanceof Array && arr.length == 0 3)Array.prototype.isPrototypeOf(arr) && arr.length == 0 测试一个对象是否在另一个对象的原型链上 注意:此处要注意,单纯判

Javascript易错知识点

? JS易错知识点总结: == 和 === 的区别: ==:判断两个变量的值是否相等. ===:判断两个变量的类型和值是否都相等,两个条件同时满足时,表达式为True. switch中break的作用: 如果一个case后面的语句,没有写break,那么程序会向下执行,而不会退出: 例如:当满足条件的case 2下面没有break时,case 3也会执行 1 var num = 2; 2 switch(num){ 3 case 1: 4 alert('case 1'); 5 break; 6 c

黑马程序员---C基础3【变量的易错】【程序结构】【if语句】【Switch语句】

------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- [变量的易错] 1.变量为什么要初始化为0 int  sum,a=3: sum = sum+a 如果未初始化则会成为一个不确定的变量,结果也会不确定,容易出错. 2.不同类型的变量之间的转换 切记int  a=1,b=0:b=1-1.5:其中b为一个整型所有结果是保留整数部分的0,而不是-0.5,又因为0没有正负之分,所有保存结果为b=0: 3.关于Xcode的一个快速注释的插件 快捷键://

细节!重点!易错点!--面试java基础篇(一)

今天来给大家分享一下java的重点易错点部分,也是各位同学面试需要准备的,欢迎大家交流指正. 1.java中的main方法是静态方法,即方法中的代码是存储在静态存储区的. 2.任何静态代码块都会在main方法之前执行. 3.java程序的初始化顺序:原则:静态优先于非静态,且只初始化一次:父类优先于子类:按照成员定义顺序初始化.例顺序:父类静态变量,父类静态代码块,子类静态变量,子类静态代码块,父类非静态变量,父类非静态代码块,父类构造函数,子类非静态变量,子类非静态代码块,子类构造函数. 4.

JavaScript易错知识点整理

本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点. JavaScript知识点 1.变量作用域 var a = 1; function test() { var a = 2; console.log(a); // 2 } test(); 上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. var a

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 $(document).ready(function(){ 2 $(document).bind("contextmenu",function(e){ 3 return false; 4 }); 5 }); 2. 隐藏搜索文本框文字 1 Hide when clicked in the search field, the value.(example can be found below in t

GLES &amp; Shader Language 易错集锦

1. vertex shader 和 fragment shader 通过varying变量传递数据,  如下代码在编译fragment shader时候会提示编译错误 vertex shader Fragment shader varying vec4 v_color; \n attribute vec3 v_Position; \n attribute vec4 f_Color; \n void main(void) \n { \n gl_Position = vec4(v_Position