使用jQuery要注意的问题
1. $.find()与$.children()的区别
有如下HTML片段:
<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():返回新创建的元素的引用
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内置方法,如:
alert($(this).text());
});
2. get(n) 返回的DOM Element对象,可以直接使用HTML DOM属性和方法,如:
$("#div_three a").get(1).onclick = function () {
alert($(this).text());
};
或将对象封装成jQuery对象达到一样的效果,如:
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
使用jQuery要注意的问题的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- HDU 4949 Light(插头dp、位运算)
比赛的时候没看题,赛后看题觉得比赛看到应该可以敲的,敲了之后发现还真就会卡题.. 因为写完之后,无限TLE... 直到后来用位运算代替了我插头dp常用的decode.encode.shift三个函数以 ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- WCF服务与WCF数据服务的区别
问: Hi, I am newbie to wcf programming and a little bit confused between WCF Service and WCF Data Se ...
- iScroll.js 用法参考 (share)
分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...
- Android Canvas绘图详解(图文)
编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...
- 51nod 1449 砝码称重(贪心算法)
题目:传送门. 题意:中文题. 题解:左物右码,w进制.m%w==0||m%w==1||m%w==w-1都是可以的,否则是NO. #include <iostream> #include ...
- jquery $(document).ready() 与window.onload的异同
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- java 500/404错误总结
404是路径错误,简单的说就是你的页面找不到后台执行它的代码(未找到服务端代码)500最常见的就是你的编程语言语法错误导致的(服务端代码报错)
- Hibernate创建hqll时报错
Hibernate 问题,在执行Query session.createQuery(hql) 报错误 出错截图: 这条语句在java运行环境下,直接连数据库不出错,如果在hiberante,strut ...
- October 8th 2016 Week 41st Saturday
When ambition ends, happiness begins. 野心消亡之日,正是快乐破茧之时. If I don't have the wish to be a useful man, ...