轻设计 / 轻生活 / 轻日记 / 轻梦想
=== zhoumojianshe ===
© 优特良品&优特建站出品 | Powered by YOUTIY
jQuery先行必备知识
jQuery在web前端的流行程度不言而喻，它强大的功能也是有目共睹的，生态圈成熟，日益强盛，插件丰富，超乎你的想象！本篇总结了预用利器之前必备知识，纯属项目中点滴积累而成。
1、json格式
单个：{\"code\":\"10000\"}
多个：[{\"name\":\"123\",\"districtName\":\"123\",\"nameen\":\"123\"},{\"name\":\"123\",\"districtName\":\"123\",\"nameen\":\"1443\"}]
2、根据ID获取元素
var cityName = $('#cityName');
3、获取文本框控件值
$("#cityName").val()
4、获取元素css
$("#addAddress").css("display") != "none"
5、给文本框控件赋值
$("#cityName").val('sss')
6、$(function(){...})是什么意思
$(document).ready(function(){
//程序段
})
上段代码类似于传统的 JavaScript 代码：
window.onload=function(){
//程序段
}
window.onload=function(){...}的作用又跟声明函数
function loading(){...}，并在html的<body onload="loading()">调用一样，这样写就不用在body的onload事件里面调用，只需在js程序段里面编写即可
虽然上述两段代码在功能上可以互换，但它们之间又有许多区别 ：
（1）执行时间不同： $(document).ready在页面框架下载完毕后就执行；而window.onload必须
在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。
（2）执行数量不同： $(document).ready可以重复写多个，并且每次执行结果不同；而window.
onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
$(document).ready(function(){}) 可以简写成 $(function(){})，因此与下面的代码是等价的。
$(document).ready(function(){
// 程序段
})
等价于
$(function(){
// 程序段
})
7、jquery中this与$(this)的用法区别
this其实是一个Html 元素
$(this)是一个JQuery对象
使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。
8、给按钮添加点击事件
savePwdBtn.click(function(){}）
9、 $('input[name=grpid]')用法
例如:页面有三个input
<input name="grpid" value="2" />
<input name="grpid" value="1" />
<input name="grpid" value="3" />
遍历输出它们的值就可以这样写:
$("input[name='grpid']").each(function(){
alert($(this).val());
});
它就会依次弹窗输出2,1,3
下面几个表达式
$('input[name=\'password\']');
$('input[name=password]');
$("input[name=\'password\']");
$("input[name='password']");
都一样
10、jquery中的双引号和单引号
alert("sss");和alert('sss');是一样的
11、通常函数定义并调用
function a(){ } a(); 或 var a = function(){ } a();
12、自调用匿名函数
使用自调用匿名函数的写法，当页面加载的时候，就直接运行该函数,不需要再调用它。
(function doSomething() {alert("Hello World");})();或者把函数名去掉以简化代码：
(function() {alert("Hello World");})();
注意：第二组圆括号()意味着:“Execute!”(执行),即使没有参数，也不能去掉;
13、函数调用
var KFC_password = new KFC_Password(this);
即会执行KFC_Password函数中的代码但是
KFC_Password中内部的函数不会自动调用
14、在函数之前加上this的作用
如在KFC_password函数中定义了ss函数
this.ss = function () {
alert("ss111");
}
则在其他地方可以直接调用，如：
var KFC_password = new KFC_Password();
KFC_password.ss();
如果不加this则不可以调用
15、jquery函数中可以嵌套函数
16、给文本框赋值
$(this).val("sss")和this.value="sss";的效果是一样的
17、jquery 双引号和单引号的区别
在js中单引号和双引号都是一样的，平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号
18、jquery中获取时间
new Date().getTime()
19、可以给this定义动态属性
如：this.noPassworddFlag = false;
20、想知道this是什么，只需要知道谁在调用它即可，谁调用它，他就是谁。对于原型链也是一样的，只不过它的prototype指针指向一层一层的向上找(搜索机制)。
21、jquery中加$是什么意思
$ 定义为 "选取" 英文是 selector 的缩写，$ 表示jquery的别名，例如$()等效于jQuery()
例子︰
$.function();
就是 选取 JQuery 定义的 function() 执行
$('input')
就是 选取 HTML 当中全部的 input 标签
$('#abc')
就是 选取 HTML 当中 ID 名称为 abc 的元素
$.fn.testing = function() {}
就是 选取 JQuery 内核函数 fn (函数) 回传给 testing 这个名称、定义为一个功能 function()
22、调用文本框事件【调用jq事件】
inputPassword1.val('').blur();
23、jquery的函数定义和调用一定要分清楚，函数定义不等于调用
24、prev()的用法
找到每个段落紧邻的前一个同辈元素
25、next()的用法
找到每个段落紧邻的下一个同辈元素
26、jquery $.和$.fn的含义
这个是jquery插件的形式
<div id="myDiv"></div>
(function($){
$.fn.extend({
test:function(){
alert($(this).attr('id'));
}
})
})(jQuery)
$('#myDiv').test();
打印出 : myDiv
(function($){
$.extend({
test:function(){
alert('111');
}
})
})(jQuery)
$.test();
打印出：111
前者是绑定在页面元素上的插件，后者是 绑定在jquery上的插件。
另一种写法：
$.extend({
trimD: function (str) {
if(null == str){
return str;
}
return str.replace(/^D(B|N)?/,'');
},
/** 根据当前浏览器言语,提供相关数据的中英文版本*/
localStr:function(data, trimFlag){
if(locale == 'en_US'){
if (trimFlag == 1){
return data.en;
}
return data.en;
}else if(locale == 'zh_CN'){
if (trimFlag == 1){
return $.trimD(data.cn);
}
return data.cn;
}
},
isEnglish:function(){
if(locale == 'en_US'){
return true;
}
return false;
},
moneyFormat:function(data){
if($.isEnglish()){
data = pageMessage.yun + data;
}else{
data = data + pageMessage.yun;
}
return data;
}
});
27、自定义公共函数写法
var common = function(){
/** 邮件 */
var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
function isEmail(value) {
alert(value);
return email.test($.trim(value));
}
function isAlert(value) {
alert(value);
}
return{
isEmail: function (value) { return isEmail(value); },
isAlert: function (value) { return isAlert(value); }
};
}();
调用方法：
common.isAlert("88888");
另一种写法：
var error = {
yumAlertError: function (code) {
try
{
alert(code);
}
catch(e)
{
alert("error1");
}
},
yumAlertError2: function (code) {
try {
alert(code);
}
catch (e) {
alert("error2");
}
}
};
调用方法：
error.yumAlertError2("Error");
28、定义全局变量
var yumCfg = {
sid:"yum_sid",
// 登录“记住我”功能
rememberUser:"yum_ueserInfo",
// "谢谢，我不需要"功能
myNotNeed:"yum_myNotNeed",
// 订单确认页面标示
orderFlag:"yum_order",
// 支付页面标示
payFlag:"yum_pay",
// 记住我功能的有效期（天）
keep:7,
// 餐厅状态
STORE_STATUS_NOTOPEN:"0",
STORE_STATUS_NORMAL:"1",
STORE_STATUS_CLOSE:"2",
STORE_STATUS_TEMPCLOSE:"3"
};
调用方法：
yumCfg.rememberUser
29、jquery异常捕捉
try {
alert(code);
}
catch (e) {
alert("error2");
}
30、判断变量是否是undefined
如下代码，如果a不是undefined则进入程序块
if(a){
}
31、jquery定义数组
this.phoneList = [];
32、jquery向数组中添加项
var productList=[];
var tt="123";
productList.push(tt);
33、jquery live()方法
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
实例
当点击按钮时，隐藏或显示 p 元素：
$("button").live("click",function(){
$("p").slideToggle();
});
34、var a = {}
var a = {}
此时a是一个对象，是一个没有任何属性的对象。
var a = {'name':'object'}
此时a是一个对象，是一个有一个属性的对象，属性名为name，属性的值为object。
alert(a.name) 或者alert(a[name])的结果都是object，这是对象访问属性的两种方式。
35、arguments传递函数的参数
36、hasOwnProperty：是用来判断一个对象是否包含给出名称的属性或对象
37、find()查找元素
$('#address_1').find('table').append(
addressTemp.format([
cityVal,
selectCity.citycode,
selectAddress.streetId,
selectAddress.streetName, address3Val,
selectAddress.storeCode, args]));
38、jquery函数中可以定义函数
39、jquery closest()
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
40、注意顺序
var minus = function () {
alert("sss");
};
minusBtn.live('click', minus);
41、jquery ajax不能触发回调函数
原因是asp.net后台写了两个处理逻辑
如：../Handler/AddressHandler.ashx?SelectAddress=1
ashx中有两个SelectAddress处理逻辑
42、去除字符串左右空格
if ($.trim($(this).val()) == '') {
alert("必须输入数字");
$(this).val("1");
}
43、字符串转换为int类型
parseInt('1')
44、判断标签类型
alert($(this).parent().next().is('input'));
45、jquery ajax即使没有data传也要传{}
46、pop() 方法用于删除并返回数组的最后一个元素
arrayObject.pop()
返回arrayObject 的最后一个元素。
pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
47、jquery undefined就等于null
48、jquery eq()方法
eq() 方法将匹配元素集缩减值指定 index 上的一个。
通过为 index 为 2 的 div 添加适当的类，将其变为蓝色：
$("body").find("div").eq(2).addClass("blue");
49、jquery根据类选择器获取集合
var order_price = $(".order_price");
alert(order_price.length);
遍历该集合可以用each不能用for循环
50、trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); //触发所有p元素的click事件
51、bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
52、方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
53、jquery after() 方法在被选元素后插入指定的内容。
54、$('#menuPopupConShow .pro_number_input')没有层级关系
find()没有层级关系
$('.popup_product_detail>div') >有层级关系
55、jquery Ajax返回的字段区分大小写
56、jquery siblings()获取匹配元素的同级元素集合，本元素不包含在集合中
查找每个 p 元素的所有类名为 "selected" 的所有同级元素：
$("p").siblings(".selected")
请思考这个带有基本的嵌套列表的页面：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
如果我们从第三个项目开始，则可找到该元素的同胞元素：
$('li.third-item').siblings().css('background-color', 'red');
下面这句话的意思是：找到inputCode的同级元素a和img加上
click()事件
inputCode.siblings('a,img').click(refreshCode);
57、jquery中!!就是双重否定的意思
!!true最终的结果就是true
58、jquery给元素添加css样式
$('li.item-a').closest('ul').css('background-color', 'red');
59、jquery closest()
closest() 方法获得匹配选择器的所有祖先元素，从当前元素开始沿 DOM 树向上。
60、jquery indexOf()获取索引值
var phoneFlag = o.message.indexOf(","); //获取索引值
o.message.substring(0, phoneFlag);//截取字符串
61、jquery ajax async属性
async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）例：
[javascript] view plaincopy
$.ajax({
type:"POST",
url:"Venue.aspx?act=init",
dataType:"html",
success:function(result){ //function1()
function1();
function2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。
当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1()这个地方，不会去执行function2()，直到function1()部分执行完毕。
注：success中的方法function1(),function2()一般（即function1(),function2()不包括ajax块时）不会异步执行，就是说function2()的执行是以function1()为前提的。
PS总结：该篇属jQuery基础知识点总结，方便日后快速查阅，高手可以飘过了O(∩_∩)O
写在最后
本文由周元俊博客原创出品，严禁转载
本文出处：http://www.youtiy.com/detail_319.html
标签云
网页设计
精致慢生活
感悟思语
我的旧年华
加偶微信
