jQuery

// jquery下载地址
http://jquery.com/download/
// 输出jquery版本
alert('jQuery版本：' + $.fn.jquery);
// jquery把所有功能封装在jQuery中，$是jQuery的别名
window.jQuery;      // jQuery(selector, context)
window.$;           // jQuery(selector, context)
$ === jQuery;       // true
typeof($);          // 'function'
// 如果$被占用，使用noConflict排除冲突
jQuery.noConflict();
// 根据id查找
var div = $('#abc');
// 根据标签查找
var ps = $('p');
// 根据class查找
var divs = $('.red');
// 根据属性查找
var texts = $('[type="text"]');
// 属性值以xxx开头
var icons = $('[name^="icon"]');
// 属性值以xxx结尾
var names = $('[name$=with]');
// 组合查找，定位更精确
$('input[name="email"]');
$('tr.red');
// 多项选择器，选择更广泛
$('p,div');
$('p.red,p.green');
// 层级选择器(p1包含在div1中)
$("div.div1 p.p1");
// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)
$("div.div1>p.p1");
// 过滤器(一般不单独使用，附加在选择器上)
$('div1 p:first-child');
$('div1 p:last-child');
$('div1 p:nth-child(2)');           //选出第N个元素，N从1开始
$('div1 p:nth-child(even)');        //选出序号为偶数的元素
$('div1 p:nth-child(odd)');         //选出序号为奇数的元素
$('div:visible');
$('div:hidden');
// 表单相关
$(':input');                //input textarea select button
$(':file');
$(':checkbox');
$(':radio');
$(':focus');                //被选中的input
$(':checked');
$(':enabled');
$(':disabled');
// 查找和过滤
var ul = $('ul.lang');
var dy = ul.find('.dy');
var swf = ul.find('#swift');
var hsk = ul.find('[name=haskell]');
// 查找父节点
var parent = div1.parent("div.red");
// 同级节点查找
div1.next();
div1.next('name="zhangsan"');
div1.prev(".green");
// 过滤
var div = $('div');
div.filter('#div1');
div.filter(function(){
    // this指向DOM对象(不是jQuery) 返回S开头的节点
    return this.innerHTML.indexOf("s") === 0;
});
// map()将jquery对象包含的若干DOM转换成其他对象
div.map(function(){
    //假设有3个div，内容分别为 php javascript swift
    return this.innerHTML;
}).get();   //用get获取包含的string ['php','javascript','swift']
div.first();
div.last();
div.slice(1,2);
// 获取设置text、html
div1.text();
div2.html();
div1.text('php');
div2.html('javascript');
div.text('language');           //可以操作多个
// css
div.css('color');       //获取
div.css('background-color', '#ffd351').css('color', 'red');     //设置(驼峰不驼峰都行)
div.css('color', '');   //清除
// 操作class改变样式，优先级没有css高
div.hasClass('highlight');
div.addClass('highlight');
div.removeClass('highlight');
// 显示/隐藏
div.show();
div.hide();
// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别
$(window).width();
$(window).height();
// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）
$(document).width();
$(document).height();
// div的宽度和高度
div1.width();
div1.height();
div1.width(400);        //设置css宽度400px，是否生效要看css是否生效
div1.height('200px');   //设置css高度200px，是否生效要看css是否生效
// 获取、设置、删除属性
div.attr('name');
div.attr('name', 'zhangsan');
div.removeAttr();
// prop跟attr类似，但是有些情况下不同
radio.attr('checked');  //checked
radio.prop('checked');  //true
radio.is(':checked');    //true,当然还可以用is判断(同理 :selected)
// 添加DOM append添加到最后、prepend添加到最前
// 字符串
ul.append('<li><span>Haskell</span></li>');
// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加
var li1 = document.createElement('li');
li1.innerHTML = '<span>Haskell</span>';
ul.append(li1);
// jQuery对象
ul.append($("#li2"));
// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)
// 对一组节点进行添加时，可以传入函数差别处理
// before添加到指定节点前、after添加到指定节点后
$("#div1").after("<p>aaa</p>");
// 删除节点
li.remove();        //所有li节点全部删除
// 事件 x.on('eventName', function(e){...});
// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)
// 键盘事件 keydown keyup keypress
// 其他事件 focus blur change submit ready
// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName'); 
// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听
// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();
// 有些敏感函数只能由用户触发，不能使用代码触发 如：window.open();

// 动画
div1.hide(3000);        //3秒内逐渐消失
div1.show('slow');      //慢慢显示 fast快快显示
div1.toggle('fast');    //根据当前状态决定是show还是hide
div1.slideUp(3000);     //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩
div1.fadeIn(1000);      //淡入淡出 fadeIn fadeOut
// animate
div1.animate(
    {
        opacity: 0.25,                  //一些css变化
        width: '256px',
        height: '256px'
    },
    3000,                               //逐渐变化的总时间3秒
    function() {
        console.log('animate over');    //结束后的回调
    }
);
// 串行、暂停(delay)动画
div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});
// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了
div1.hide(2000, function(){$(this).remove()});
// AJAX 3.0以后版本移出了success,error等方法
// .ajax   .post .get .getJSON
$.ajax('url', {
    async:true,                                                         //默认true
    method:'post',                                                      //默认get
    //post请求的格式，也可以指定text/plain、application/json
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    data:'发送的数据',                                                  //可以是字符串、数组、对象
    headers:{'Cache-Control':'no-cache'},                               //只能是对象
    //接收的数据类型html、xml、json、text，默认根据Content-Type猜测
    dataType:'json',
    jsonp: 'callback'                                                   //使用jsonp跨域
}).done(function(data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function() {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});
// 扩展(编写jquery插件)
$.fn.highlight1 = function(options) {
    // this已绑定为当前jQuery对象
    // 要考虑到各种情况 1.options为undefined 2.options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
};
// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)
//  $.extend把默认值和用户传入的options合并到对象{}中并返回
$.fn.highlight = function (options) {
    // 合并默认值和用户设定值
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
// 设定默认值
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}
// 也可以这样设置
$.fn.highlight.defaults.color = 'red';

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

// jquery下载地址

http://jquery.com/download/

// 输出jquery版本

alert('jQuery版本：' + $.fn.jquery);

// jquery把所有功能封装在jQuery中，$是jQuery的别名

window.jQuery; // jQuery(selector, context)

window.$; // jQuery(selector, context)

$ === jQuery; // true

typeof($); // 'function'

// 如果$被占用，使用noConflict排除冲突

jQuery.noConflict();

// 根据id查找

var div = $('#abc');

// 根据标签查找

var ps = $('p');

// 根据class查找

var divs = $('.red');

// 根据属性查找

var texts = $('[type="text"]');

// 属性值以xxx开头

var icons = $('[name^="icon"]');

// 属性值以xxx结尾

var names = $('[name$=with]');

// 组合查找，定位更精确

$('input[name="email"]');

$('tr.red');

// 多项选择器，选择更广泛

$('p,div');

$('p.red,p.green');

// 层级选择器(p1包含在div1中)

$("div.div1 p.p1");

// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)

$("div.div1>p.p1");

// 过滤器(一般不单独使用，附加在选择器上)

$('div1 p:first-child');

$('div1 p:last-child');

$('div1 p:nth-child(2)'); //选出第N个元素，N从1开始

$('div1 p:nth-child(even)'); //选出序号为偶数的元素

$('div1 p:nth-child(odd)'); //选出序号为奇数的元素

$('div:visible');

$('div:hidden');

// 表单相关

$(':input'); //input textarea select button

$(':file');

$(':checkbox');

$(':radio');

$(':focus'); //被选中的input

$(':checked');

$(':enabled');

$(':disabled');

// 查找和过滤

var ul = $('ul.lang');

var dy = ul.find('.dy');

var swf = ul.find('#swift');

var hsk = ul.find('[name=haskell]');

// 查找父节点

var parent = div1.parent("div.red");

// 同级节点查找

div1.next();

div1.next('name="zhangsan"');

div1.prev(".green");

// 过滤

var div = $('div');

div.filter('#div1');

div.filter(function(){

// this指向DOM对象(不是jQuery) 返回S开头的节点

return this.innerHTML.indexOf("s") === 0;

});

// map()将jquery对象包含的若干DOM转换成其他对象

div.map(function(){

//假设有3个div，内容分别为 php javascript swift

return this.innerHTML;

}).get(); //用get获取包含的string ['php','javascript','swift']

div.first();

div.last();

div.slice(1,2);

// 获取设置text、html

div1.text();

div2.html();

div1.text('php');

div2.html('javascript');

div.text('language'); //可以操作多个

// css

div.css('color'); //获取

div.css('background-color', '#ffd351').css('color', 'red'); //设置(驼峰不驼峰都行)

div.css('color', ''); //清除

// 操作class改变样式，优先级没有css高

div.hasClass('highlight');

div.addClass('highlight');

div.removeClass('highlight');

// 显示/隐藏

div.show();

div.hide();

// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别

$(window).width();

$(window).height();

// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）

$(document).width();

$(document).height();

// div的宽度和高度

div1.width();

div1.height();

div1.width(400); //设置css宽度400px，是否生效要看css是否生效

div1.height('200px'); //设置css高度200px，是否生效要看css是否生效

// 获取、设置、删除属性

div.attr('name');

div.attr('name', 'zhangsan');

div.removeAttr();

// prop跟attr类似，但是有些情况下不同

radio.attr('checked'); //checked

radio.prop('checked'); //true

radio.is(':checked'); //true,当然还可以用is判断(同理 :selected)

// 添加DOM append添加到最后、prepend添加到最前

// 字符串

ul.append('<li>Haskell</li>');

// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加

var li1 = document.createElement('li');

li1.innerHTML = 'Haskell';

ul.append(li1);

// jQuery对象

ul.append($("#li2"));

// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)

// 对一组节点进行添加时，可以传入函数差别处理

// before添加到指定节点前、after添加到指定节点后

$("#div1").after("aaa");

// 删除节点

li.remove(); //所有li节点全部删除

// 事件 x.on('eventName', function(e){...});

// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)

// 键盘事件 keydown keyup keypress

// 其他事件 focus blur change submit ready

// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName');

// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听

// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();

// 有些敏感函数只能由用户触发，不能使用代码触发如：window.open();

// 动画

div1.hide(3000); //3秒内逐渐消失

div1.show('slow'); //慢慢显示 fast快快显示

div1.toggle('fast'); //根据当前状态决定是show还是hide

div1.slideUp(3000); //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩

div1.fadeIn(1000); //淡入淡出 fadeIn fadeOut

// animate

div1.animate(

{

opacity: 0.25, //一些css变化

width: '256px',

height: '256px'

3000, //逐渐变化的总时间3秒

function() {

console.log('animate over'); //结束后的回调

}

);

// 串行、暂停(delay)动画

div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});

// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了

div1.hide(2000, function(){$(this).remove()});

// AJAX 3.0以后版本移出了success,error等方法

// .ajax .post .get .getJSON

$.ajax('url', {

async:true, //默认true

method:'post', //默认get

//post请求的格式，也可以指定text/plain、application/json

contentType:'application/x-www-form-urlencoded; charset=UTF-8',

data:'发送的数据', //可以是字符串、数组、对象

headers:{'Cache-Control':'no-cache'}, //只能是对象

//接收的数据类型html、xml、json、text，默认根据Content-Type猜测

dataType:'json',

jsonp: 'callback' //使用jsonp跨域

}).done(function(data) {

ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));

}).fail(function (xhr, status) {

ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);

}).always(function() {

ajaxLog('请求完成: 无论成功或失败都会调用');

});

// 扩展(编写jquery插件)

$.fn.highlight1 = function(options) {

// this已绑定为当前jQuery对象

// 要考虑到各种情况 1.options为undefined 2.options只有部分key

var bgcolor = options && options.backgroundColor || '#fffceb';

var color = options && options.color || '#d85030';

this.css('backgroundColor', bgcolor).css('color', color);

return this;

};

// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)

// $.extend把默认值和用户传入的options合并到对象{}中并返回

$.fn.highlight = function (options) {

// 合并默认值和用户设定值

var opts = $.extend({}, $.fn.highlight.defaults, options);

this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);

return this;

}

// 设定默认值

$.fn.highlight.defaults = {

color: '#d85030',

backgroundColor: '#fff8de'

}

// 也可以这样设置

$.fn.highlight.defaults.color = 'red';

唐晓锋–BLOG

This is just a personal note.

发表评论取消回复

发表评论 取消回复

发表评论取消回复