JavaScript笔记二:jQuery学习笔记
(20150115注:部分方法的执行结果跟jquery版本有关,
例如.attr("checked")的值可能是“checked”,也可能是true
请注意)
(不完整,不准确,待修改,请以官方文档为准)
see
http://docs.jquery.com/Main_Page
http://api.jquery.com/
http://docs.jquery.com/Alternative_Resources
http://semooh.jp/
http://shawphy.github.com/jquery-api/
* 核心(http://api.jquery.com/category/core/)
* jQuery函数和$(...)
$("input:radio", document.form[0])
$是jQuery的简写,第一参数是选择器(类似CSS语法),第二参数是检索范围的文档对象(如果是Ajax则为xml.responseXML),缺省为当前HTML的DOM元素。
(补注:)$("span", this).html("(ID = '<b>" + this.id + "</b>')");
(补注:见attr(key,fn))用于$().attr(,).each()闭包内,this表示attr返回标签的当前遍历的标签的范围(这里是<div></div>)
$("<div><p>Hello</p></div>")
根据HTML字符串创建DOM以对其进行后续操作(input节点可能有限制),注意斜杠要转义。空元素$("<span/>")在jQuery 1.3后写成$(document.createElement("span"))。第二参数可以传所属文档对象。
$(document.body)
把一个或多个DOM元素转换为jQuery对象(但不能接受XML文档和Window对象)
$(function(){})
$(document).ready()的简写(可以写成jQuery(function($) {})保护$变量),在DOM加载时执行参数中的闭包
* jQuery对象操作和类似数组的操作
(http://api.jquery.com/category/miscellaneous/dom-element-methods/)
(http://api.jquery.com/category/internals/)
(http://api.jquery.com/category/properties/)
$("li").each(function() {$(this)}) 或 $("div").each(function (index, domEle) {$(this)})
循环遍历集合。闭包返回false结束循环(相当于break),返回true继续循环(相当于continue)。$(this)相当于闭包第二参数domEle,即当前遍历的DOM元素。
$("div").size()
集合持有的对象个数。相当于length属性
$("div").length
集合持有的对象个数。相当于size()
$("ul").selector
jQuery 1.3以后,获得选择器字符串
$("ul").context $("ul", document.body).context.nodeName
jQuery 1.3以后,获取jQuery对象上的DOM对象,主要用于插件。
$("p").eq(1)
取出集合中索引为n的元素(索引从0开始)
$("div").get()
转换为DOM元素的数组类型,以方便遍历或用.reverse()翻转数组。
$(this).get(0)
取出指定索引的DOM元素。$(this).get(0)相当于$(this)[0]
$("div").index(this)
查询指定DOM元素的索引号或是否存在,不存在则返回-1.
$("div").toArray().reverse()
获取所有选中的jQuery对象的DOM对象数组(每个数组元素可以读取.innerHTML域)。
* 插件
jQuery.fn.extend({ xxx:function() {return this.XXX()} });$("input[@type=xxx]");
插件扩展,通常用于选择器内的条件表达式
jQuery.extend({ xxx:function(a, b) {}});jQuery.xxx(a, b);
插件扩展,加入到jQuery的名字空间内。
* 消除命名空间的冲突(http://api.jquery.com/category/miscellaneous/setup-methods/)
jQuery.noConflict();jQuery("div p").hide();$("content")或var j=jQuery.noConflict();j("div p").hide();$("content")
恢复$原有的定义或内容。后面的jQuery代码,要么把$改为jQuery,要么用(function($) {...})()括起原来使用$的jQuery代码,要么用其返回值作为名字空间。
var dom = {};dom.query = jQuery.noConflict(true);dom.query("div p").hide();
恢复$和jQuery原有定义或内容(参数为true表示extreme模式),后面的jQuery代码改用其返回值作为名字空间。
* 新增
$.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});
延迟ready事件,直至指定的插件加载完毕。
var sub$ = jQuery.sub();
复制一个新的jQuery即$对象,对这个新的$的属性或方法的修改或添加不影响原来的$。
$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ alert(ajaxArgs[1]);});
异步执行回调。
$.when($.ajax("/page1.php"), $.ajax("/page2.php")).then(myFunc, myFailure);
执行一个或多个事件(如ajax),根据结果(成功和失败)执行前一个回调或后一个回调。(可以用done代替then)
$.when( { testing: 123 } ).done(function(x){ alert(x.testing); });
非异步执行回调(传给闭包的参数就是$.when的实参)。
* 选择器(使用CSS风格的字符串进行筛选,并转为jQuery对象)(http://api.jquery.com/category/selectors/)
* 基本和复合选择器(http://api.jquery.com/category/selectors/basic-css-selectors/)
$("#myID\\.entry\\[1\\]")
id等于特定值,反斜杠需要转义
$("div")
标签等于特定值
$(".myClass")
class等于特定值
$("*")
当前集合中的全部节点
$("div,span,p.myClass")
多个选择器的并集
* 与前一个选择器有层次或平行关系的选择器(http://api.jquery.com/category/selectors/hierarchy-selectors/)
$("form input")
某个选择器下的符合特定选择器的后代集合
$("#main > *")
某个选择器下的符合特定选择器的子元素集合
$("label + input")
某个选择器后符合特定选择器的紧跟的同辈元素
$("#prev ~ div")
某个选择器后符合特定选择器的所有同辈元素
* 基本过滤器,对选择器的再选择子集,根据索引、反选、特性(http://api.jquery.com/category/selectors/basic-filter-selectors/)
$("li:first")
选择器选中的第一个
$("li:last")
选择器选中的最后一个
$("input:not(:checked)")
括号内选择器选中的被排除
$("li:even")
选择器选中的索引(总索引,从0开始)为偶数的子集
$("li:odd")
选择器选中的索引(总索引,从0开始)为奇数的子集
$("td:eq(2)")
选择器选中的索引(从0开始)为特定值的节点
$("td:gt(4)")
选择器选中的索引(从0开始)大于特定值的子集
$("td:lt(4)")
选择器选中的索引(从0开始)小于特定值的子集
$(":header")
选中所有h1,h2,h3标签
$("div:animated")
选择器选中的正在执行动画的子集
el.is(":focus")
判断当前是否是焦点
* 内容过滤器,对选择器的再选择子集,根据节点中的内容(http://api.jquery.com/category/selectors/content-filter-selector/)
$("div:contains('John')")
选择器选中的内容包含特定值的子集
$("td:empty")
选择器选中的空标签子集
$("div:has(strong)")
选择器选中的,使括号内选择器结果存在的子集
$("td:parent")
选择器选中的父节点,包括文本节点
* 显示过滤器(http://api.jquery.com/category/selectors/visibility-filter-selectors/)
$("div:hidden")
最初没有显示的元素(style为display:none;的div或type为hidden的input)
$("div:visible")
显示的元素
* 属性过滤(http://api.jquery.com/category/selectors/attribute-selectors/)
$("div[id]")
存在属性
$("input[name='newsletter']")
属性等于特定值
$("input[name!='newsletter']")
属性不存在或不等于特定值
$("input[name^='news']")
属性等于特定值开头的值
$("input[name$='letter']")
属性等于特定值结尾的值
$("input[name*='man']")
属性包含特定值
$("input[id][name$='man']")
多个属性过滤
$('a[hreflang|="en"]')
属性等于特定值,或以特定值为前缀后跟着减号'-'(例如"en-xxx")
$('input[name~="man"]')
属性包含特定值的单词(特定值的前后是空白符或字符串的头尾)
* 特定于父节点的子要素索引过滤器(http://api.jquery.com/category/selectors/child-filter-selectors/)
$("ul li:nth-child(2)")
集合中特定于父节点的索引为指定值或even/odd/关于n的表达式(不同于:even和:odd,它的索引值特定于父节点)
$("div span:first-child")
集合中特定于父节点的第一个元素
$("div span:last-child")
集合中特定于父节点的最后的元素
$("div button:only-child")
集合中特定于父节点的只有一个元素时选中那个元素
* 表单(http://api.jquery.com/category/selectors/form-selectors/)
$(":input")
所有input节点(包括type为input, select, button, password, radio, reset, submit, text, file, image, hidden),select,textarea,button节点
$(":text")
所有textarea节点
$(":password")
所有type为password的input节点
$(":radio")
所有type为radio的input节点
$(":checkbox")
所有type为checkbox的input节点
$(":submit")
所有type为submit的input节点和button节点
$(":image")
所有type为image的input节点
$(":reset")
所有type为reset的input节点
$(":button")
所有type为button的input节点和button节点
$(":file")
所有type为file的input节点
$(":hidden")
最初没有显示的元素(style为display:none;的div或type为hidden的input)
* 表单过滤器(http://api.jquery.com/category/selectors/form-selectors/)
$("input:enabled")
所有没有disabled属性的集合
$("input:disabled")
所有disabled属性为disabled的集合
$("input:checked")
所有checked属性为checked(或被鼠标勾上的)的集合(通常是form的input type="checkbox"节点)(checkbox和radio按钮)
$("select option:selected")
所有selected属性为selected(或被鼠标选中)的集合(通常是select的option节点)
el.is(":focus")
判断当前是否是焦点
* 属性读写(读取或修改标签属性、样式和文本或表单内容和选项)(http://api.jquery.com/category/attributes/)
* 修改标签属性(非"class")的值
var title = $("em").attr("title")
返回指定标签名(如"em")的首个标签的属性(如"title")的属性值。
$("img").attr({src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo"});
动态设置标签属性的值(注意IE的class属性需要使用.addClass(class)/.removeClass(class))
$("button:gt(0)").attr("disabled","disabled");
设置指定标签集合的属性名和属性值
$("div").attr("id", function (arr) {return "div-id" + arr;}).each(function() {$("span", this).html("(ID = '<b>" + this.id + "</b>')");});
通过闭包动态设置标签属性的值,闭包参数arr是索引(旧版本的jQuery是arr[0]),返回值可以使用.each()和this。
$("button").click(function () {$(this).next().removeAttr("disabled").focus().val("editable now");});
删除指定标签的属性(后面可以继续操作)
* 修改标签class属性的值
$("p:last").addClass("selected");
把css的.selected样式应用在指定的标签上
$("p:even").removeClass("blue");
删除指定标签上的.blue样式
$("p").click(function () {$(this).toggleClass("highlight");});
翻转(应用或删除)标签上的highlight属性(一般用于交互动作的闭包内)
var count = 0; $("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});
利用布尔值决定应用还是删除特定的css样式(一般用于交互动作的闭包内)
* 访问XHTML的html字符串
var htmlStr = $(this).html();
获取标签内的html字符串(相当于innerHTML),对XML无效,仅对XHTML有效。
$("div").html("<span class='red'>Hello <b>Again</b></span>");});
设置标签内的html字符串,对XML无效,仅对XHTML有效。
* 访问XML和XHTML的纯文本(指标签夹住的内容,包括里面嵌套的子标签)
$("div").text()
获取标签内的纯文本
$("p").text("<b>Some</b> new text.");$("input").val($("p").html());
设置标签内的纯文本(最终得到的html文本html()会对'<'和'>'进行转义)
* 访问表单的当前选择值
function displayVals() {var singleValues = $("#single").val();$("p").html("<b>Single:</b> " + singleValues);} $("select").change(displayVals);
动态获取<select>表单的当前选择项(一般用在交互动作的闭包内),如果表单的属性multiple="multiple",则返回值是数组(一般写法是var multipleValues = $("#multiple").val() || [];)
$("input").val(text);$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);
动态设置表单元素(如文本框)的内容或选中表单元素(如单选框,复选框,单选按钮,多选按钮)的文本项(一般用在交互动作的闭包内)
* 新增
if($(this).hasClass("protected")){}
判断class属性是否等于某个值
$input.prop('checked')
获取选中集合中第一个元素的该属性的值(jQuery 1.6新增,不同于.attr())
$para.prop("luggageCode", 1234);
指定属性
$para.removeProp("luggageCode");
删除属性
* 遍历(子选择器,或并集)(http://api.jquery.com/category/traversing/)
* 索引、条件过滤或条件判断,集合映射(http://api.jquery.com/category/traversing/filtering/)
$("div").eq(2).addClass("red");
索引(0至n-1)相等过滤
if($(this).hasClass("protected")){}
判断class属性是否等于某个值
$("div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red");
条件过滤(保留选择器选中的集合)
$("div").css("background", "#b4b0da").filter(function(index) {return index == 1 || $(this).attr("id") == "fourth";}).css("border", "3px double red");
用闭包遍历,如果闭包返回的不是false就保留
if($(this).is(":first-child")){}
判断指定jQuery对象是否满足指定的选择器。
$("p").append($("input").map(function(){return $(this).val();}).get().join(", ") );
遍历相同类型的表单元素并用闭包映射为指定属性值的集合
$("div").not(".green, #blueone").css("border-color", "red");
相反条件过滤(删除选择器选中的集合)
$div.slice(start, end).css("background", "yellow");
返回指定索引(从0开始)范围内的集合
$("p span").last().addClass('highlight');
选中集合中最后一个元素
$("ul").has("li").addClass("full");
选中集合中的子节点符合特定选择器或DOM的所有元素
* 查找(全体子孙元素、兄弟元素、父级元素,或其选择器过滤)(http://api.jquery.com/category/traversing/tree-traversal/)
$("div").css("border", "2px solid red").add("p").css("background", "yellow");
获取两个选择器的并集,后面的操作同时作用在.add()的选择器参数和前面的选择器。
var $kids = $(e.target).children();
获取所有子元素,参数可传入选择器(一般用于交互闭包)
$(e.target).closest("li")
最接近的子元素(一般用于交互闭包)
$("p").contents().not("[nodeType=1]").wrap("<b/>");
文本节点包含的所有子元素
$("p").find("span").css('color','red');
所有子孙元素中用选择器过滤
$("button[disabled]").next().text("this button is disabled");
获取下一个紧挨着的兄弟(平行)DOM元素,参数可传入选择器。
$curr = $curr.prev();
获取上一个紧挨着的兄弟(平行)DOM元素,参数可传入选择器。
$("div:first").nextAll().addClass("after");
获取后面所有兄弟(平行)DOM元素,参数可传入选择器。
$("div:last").prevAll().addClass("before");
获取前面所有兄弟(平行)DOM元素,参数可传入选择器。
var len = $(".hilite").siblings().css("color", "red").length;
获取所有兄弟(平行)DOM元素,参数可传入选择器。
var parentTag = $(this).parent().get(0).tagName;
获取父级DOM元素,参数可传入选择器。
$("#term-2").nextUntil("dt").css("background-color", "red");
获取后面的兄弟(平行)DOM元素(不包括自己),直至遇到符合选择器的元素(即得到的结果不符合选择器的条件)。
$('li.item-a').offsetParent().css('background-color', 'red');
获取最近的祖先节点
$('li.item-a').parents().css('background-color', 'red');
获取所有父节点
$("li.item-a").parentsUntil(".level-1").css("background-color", "red");
获取所有父节点,直至遇到符合选择器的元素(即得到的结果不符合选择器的条件)
$("#term-2").prevUntil("dt").css("background-color", "red");
获取前面的兄弟(平行)DOM元素(不包括自己),直至遇到符合选择器的元素(即得到的结果不符合选择器的条件)。
* 链式选择器(http://api.jquery.com/category/traversing/miscellaneous-traversal/)
$("div").find("p").andSelf().addClass("border");
取子选择器和父选择器的并集(如$()和.find()的结果的并集)。
$("p").showTags(0).find("span").showTags(1).css("background", "yellow").end().showTags(2).css("font-style", "italic");
丢弃所有子选择器,重置为最初的$()选择器。
$("div").css("border", "2px solid red").add("p").css("background", "yellow");
获取两个选择器的并集,后面的操作同时作用在.add()的选择器参数和前面的选择器。
$("p").contents().not("[nodeType=1]").wrap("<b/>");
文本节点包含的所有子元素
* 操作(http://api.jquery.com/category/manipulation/)
* 内部单向插入(http://api.jquery.com/category/manipulation/dom-insertion-inside/)
$("p").append("<b>Hello</b>");
内容的后面添加html字符串
$("span").appendTo("#foo")
第一个选择器添加(移动)到第二个选择器内容的后面
$("p").prepend("<b>Hello </b>");
内容的前面添加html字符串
$("span").prependTo("#foo");
第一个选择器添加(移动)到第二个选择器内容的前面
$("div").html("<span class='red'>Hello <b>Again</b></span>");});
设置标签内的html字符串,对XML无效,仅对XHTML有效。
$("p").text("<b>Some</b> new text.");$("input").val($("p").html());
设置标签内的纯文本(最终得到的html文本html()会对'<'和'>'进行转义)
* 外部单向插入(http://api.jquery.com/category/manipulation/dom-insertion-outside/)
$("p").after("<b>Hello</b>");
标签后面添加html字符串
$("p").before("<b>Hello</b>");
标签前面添加html字符串
$("p").insertAfter("#foo");
第一个选择器添加(移动)到第二个选择器标签的后面
$("p").insertBefore("#foo");
第一个选择器添加(移动)到第二个选择器标签的前面
* 附近双向插入(环绕)(http://api.jquery.com/category/manipulation/dom-insertion-around/)
$("p").wrap("<div class='wrap'><b></b></div>");
用html字符串逐个包围目标标签(目标标签在内)
$("p").wrap($('#content'));
用第二选择器的标签逐个(移动并)包围目标标签(目标标签在内)
$("p").wrapAll("<div></div>");
用html字符串一次包围所有目标标签(目标标签在内)
$("p").wrapAll(document.createElement("div"));
用第二选择器的标签一次包围所有目标标签(目标标签在内)
$("p").wrapInner("<b></b>");
目标标签逐个包围指定的html字符串(目标标签在外)
$("p").wrapInner(document.createElement("b"));
目标标签逐个包围第二选择器标签(目标标签在外)
$("p").unwrap();
删除环绕的标签
* 替换(http://api.jquery.com/category/manipulation/dom-replacement/)
$(this).replaceWith("<div>" + $(this).text() + "</div>");
目标标签被替换为html字符串
$("<b>Paragraph. </b>").replaceAll("p");
用html字符串替换所有选择器的标签
* 删除(http://api.jquery.com/category/manipulation/dom-removal/)
$("p").empty();
删除选择器标签所有子要素、事件句柄和内部缓存数据。
$("p").remove();
删除选择器标签所有要素,可传入选择器参数
p = $("p").detach();
删除元素,类似.remove(),但保留相关的jQuery对象。
$("p").unwrap();
删除环绕的标签
* 复制(http://api.jquery.com/category/manipulation/copying/)
$("b").clone().prependTo("p");
复制出相同标签以便进行插入操作(此时这个复制对象成为当前目标)
$(this).clone(true).insertAfter(this);
复制出相同标签,true表示复制其事件句柄(此时这个复制对象成为当前目标)
* 类属性操纵(新增)(http://api.jquery.com/category/manipulation/class-attribute/)
$("p:last").addClass("selected");
把css的.selected样式应用在指定的标签上
$("p:even").removeClass("blue");
删除指定标签上的.blue样式
if($(this).hasClass("protected")){}
判断class属性是否等于某个值
$("p").click(function () {$(this).toggleClass("highlight");});
翻转(应用或删除)标签上的highlight属性(一般用于交互动作的闭包内)
* 通用属性(新增)(http://api.jquery.com/category/manipulation/general-attributes/)
var title = $("em").attr("title")
返回指定标签名(如"em")的首个标签的属性(如"title")的属性值。
$input.prop('checked')
获取选中集合中第一个元素的该属性的值(jQuery 1.6新增,不同于.attr())
$("button").click(function () {$(this).next().removeAttr("disabled").focus().val("editable now");});
删除指定标签的属性(后面可以继续操作)
$para.removeProp("luggageCode");
删除属性
function displayVals() {var singleValues = $("#single").val();$("p").html("<b>Single:</b> " + singleValues);} $("select").change(displayVals);
动态获取<select>表单的当前选择项(一般用在交互动作的闭包内),如果表单的属性multiple="multiple",则返回值是数组(一般写法是var multipleValues = $("#multiple").val() || [];)
$("input").val(text);$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);
动态设置表单元素(如文本框)的内容或选中表单元素(如单选框,复选框,单选按钮,多选按钮)的文本项(一般用在交互动作的闭包内)
* 层叠样式表(CSS)
(http://api.jquery.com/category/css/)
(http://api.jquery.com/category/manipulation/style-properties/)
* 读写style属性字符串的键值对
var color = $(this).css("background-color"); //style="background-color:blue;"
读取style属性字符串中CSS属性对应的值
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
用哈希表修改style属性字符串(多个CSS键值对)
$(this).css("color","red");
修改一对style属性字符串(单个CSS键值对)
* 位置(偏移)(http://api.jquery.com/category/offset/)
var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );
文档的偏移位置(.left和.top)
var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top );
相对于父节点的位置(.left和.top),单位是像素
$('#out').text('scrollTop: '+$(this).scrollTop());
获取上下滚动(条)的位置
$('div').scrollTop(50);
设置上下滚动(条)的位置
$('#out').text('scrollLeft: '+$(this).scrollLeft());
获取左右滚动(条)的位置
$('div').scrollLeft(100);
设置左右滚动(条)的位置
$('li.item-a').offsetParent().css('background-color', 'red');
获取最近的祖先节点
* 高度和宽度(例如:div {width: 200px;border: 3px solid black;padding: 2px;margin: 5px;})(http://api.jquery.com/category/dimensions/)
$("p").height()
获取标签或文档的高度
$(this).height(30).css({cursor:"auto", backgroundColor:"green"});
设置标签的高度,参数以像素为单位
$("p").width()
获取标签或文档的宽度
$(this).width(30).css({cursor:"auto", "background-color":"blue"});
设置标签的宽度,参数以像素为单位
$('div').text('innerHeight: '+$('div').innerHeight());
获取内部(排除border但包含padding)高度
$('div').text('innerWidth: '+$('div').innerWidth());
获取内部(排除border但包含padding)宽度
$('div:last').text('outerHeight with margin: '+$('div:last').outerHeight({margin: true}));
获取外部(包括border、padding)高度,可指定{margin: true}参数,也可以缺省
$('div:last').text('outerWidth with margin: '+$('div').outerWidth({margin: true}));
获取外部(包括border、padding)宽度,可指定{margin: true}参数,也可以缺省
* 新增
$("p:last").addClass("selected");
把css的.selected样式应用在指定的标签上
$("p:even").removeClass("blue");
删除指定标签上的.blue样式
if($(this).hasClass("protected")){}
判断class属性是否等于某个值
$("p").click(function () {$(this).toggleClass("highlight");});
翻转(应用或删除)标签上的highlight属性(一般用于交互动作的闭包内)
$.cssHooks["someCSSProp"] = {get: function( elem, computed, extra ) {},set: function( elem, value ) {}};
代理css属性的设置和获取
* 事件(http://api.jquery.com/category/events/)
* 页面加载(http://api.jquery.com/category/events/document-loading/)
$(document).ready(function(){});
DOM准备好后执行闭包
* 事件处理(依附)(http://api.jquery.com/category/events/event-handler-attachment/)
$("p").bind("click", function(){alert( $(this).text() );});
添加事件句柄
function handler(event) {alert(event.data.foo);} $("p").bind("click", {foo: "bar"}, handler)
处理事件参数
$("form").bind("submit", function() {return false;})
取消提交事件(返回false)
$("form").bind("submit", function(event){event.preventDefault();});
只阻止默认操作
$("form").bind("submit", function(event){event.stopPropagation();});
只阻止冒泡(沿着DOM树向上传递)但不阻止默认操作
$("p").bind("myCustomEvent", function(e, myName){}); $("p").trigger("myCustomEvent", [ "John" ]);
处理和发送定制事件
$("div").one("click", function(){});
只处理一次事件(第二参数可以是data)
$("form:first").trigger("submit")
发送事件
$("p").click(function (event, a, b) {}).trigger("click", ["foo", "bar"]);
发送事件,传递参数给闭包
$("input").triggerHandler("focus");
发送事件(阻止默认动作;只应用第一个对象;阻止冒泡;返回最后的句柄返回的值而非jQuery对象)
$("#theone").unbind('click', aClick).text("Does nothing...");
删除事件句柄。
$("body").delegate("p", "click", function(){$(this).after("<p>Another paragraph!</p>");});
给特定根选择器下的子选择器的(现在和将来的)所有元素添加事件句柄。
$("body").undelegate("#theone", "click", aClick)
删除.delegate()指定的事件句柄。
var obj = {name: "John",test: function() {$("#log").append( this.name );$("#test").unbind("click", obj.test);}}; $("#test").click( jQuery.proxy( obj, "test" ) );
改变事件回调的上下文(this对象)
* 交互辅助函数((http://api.jquery.com/category/events/mouse-events/))
$("li").hover(function(){},function(){});
鼠标滑进和滑出事件
$("li").toggle(function(){},function(){});
鼠标多次点击事件
* 现场事件(http://api.jquery.com/category/events/event-handler-attachment/)
$("p").live("click", function(){});
添加live事件句柄(选择器对未来动态增加的DOM也有效)
$("#theone").die("click", aClick)
删除live事件句柄
* 事件辅助函数(bind/trigger的缩写、快捷方式,可以在添加事件句柄后立刻执行无参数的事件)
(http://api.jquery.com/category/events/browser-events/)
(http://api.jquery.com/category/events/form-events/)
(http://api.jquery.com/category/events/keyboard-events/)
(http://api.jquery.com/category/events/mouse-events/)
$('#target').blur();
表单元素失去焦点
$('#target').blur(function() {alert('Handler for .blur() called.');});
表单元素失去焦点的事件
$("select").change();
表单改变
$("select").change(function(){}).change();
表单改变事件
$("p").click()
鼠标点击
$("p").click(function(){})
鼠标点击事件
$("p").dblclick()
鼠标双击
$("p").dblclick(function(){})
鼠标双击事件
$("img").error();
加载错误
$("img").error(function(){});
加载错误事件
$("input").focus();
获取焦点
$("input").focus(function(){alert(this.type+" got focus.");});
获取焦点事件
$(window).keydown();
键盘按下
$(window).keydown(function(e){$("div").text(e.keyCode);return false;});
键盘按下事件
$("input").keypress();
键盘输入
$("input").keypress(function (e) {$("div").text(e.which);});
键盘输入事件
$(window).keyup();
键盘弹起
$(window).keyup(function(e){$("div").text(e.keyCode);});
键盘弹起事件
$(window).load(function(){});
加载事件
$(window).mousedown(function(){})
鼠标按下事件
$(window).mousemove(function(){})
鼠标移动事件
$(window).mouseout(function(){})
鼠标移出事件
$(window).mouseover(function(){})
鼠标移入事件
$(window).mouseup(function(){})
鼠标弹起事件
$(window).resize(function(){})
改变大小事件
$(window).scroll(function(){})
滚动事件
$(document).select();
文本选择
$(document).select(function () {});
文本选择事件
$("form").submit();
表单提交
$("form").submit(function(){});
表单提交事件
$(window).unload(function(){alert("Bye now!");});
页面关闭事件
$("p").focusin(function() {});
支持冒泡的得到焦点事件(检测父节点)
$("p").focusout(function() {});
支持冒泡的失去焦点事件(检测父节点)
$("div.enterleave").mouseenter(function(){});
鼠标进入(IE专用)
$("div.enterleave").mouseleave(function(){});
鼠标离开(IE专用)
* (新增)事件对象(http://api.jquery.com/category/events/event-object/)
var e = jQuery.Event("click");jQuery("body").trigger( e );
生成一个新的事件对象(不使用new),然后发送。
var e = jQuery.Event("keydown", { keyCode: 64 });
指定事件的属性
$("p").click(function(event) {alert( event.currentTarget === this );});
冒泡阶段的当前对象(如果使用jQuery.proxy,this是提供的上下文对象)
$(this).bind('click', {index:i}, function(e){alert('my index is ' + e.data.index);});
读取bind传入的第二参数对象。
$("a").click(function(event){alert(event.isDefaultPrevented());event.preventDefault();alert(event.isDefaultPrevented());});
判断是否执行preventDefault。
e.isImmediatePropagationStopped()
判断是否执行stopImmediatePropagation。
e.isPropagationStopped()
判断是否stopPropagation
$("p").bind("test.something", function(event) {alert( event.namespace );});
读取自定义事件的事件名(如"test.something")
$(document).bind('mousemove',function(e){$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });
读取相对于左上角的X坐标(iframe内)
$(document).bind('mousemove',function(e){$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });
读取相对于左上角的Y坐标(iframe内)
$("a").click(function(event) {event.preventDefault();$('<div/>').append('default ' + event.type + ' prevented').appendTo('#log');});
阻止默认操作(例如URL的跳转)
$("a").mouseout(function(event) {alert(event.relatedTarget.nodeName);});
如果是mouseout事件,是进入的对象,如果是mouseover,是移出的对象。
$("button").click(function(event) {return "hey";});$("button").click(function(event) {$("p").html( event.result );});
读取事件处理句柄返回的值,如果没有返回值则为undefined
$("p").click(function(event){event.stopImmediatePropagation();});$("p").click(function(event){$(this).css("background-color", "#f00");});
处理句柄剩下语句继续执行,但其他冒泡经过的注册处理句柄不执行。
$("p").click(function(event){event.stopPropagation();});
阻止冒泡和阻止执行父处理句柄。
$("body").click(function(event) {$("#log").html("clicked: " + event.target.nodeName);});
产生事件对象的DOM节点(最上层)
var last, diff;$('div').click(function(event) {if ( last ) {diff = event.timeStamp - last;$('div').append('time since last event: ' + diff + '<br/>');} else {$('div').append('Click again.<br/>');}last = event.timeStamp;});
点击时间(距离1970年1月1日的毫秒数)
$("a").click(function(event) {alert(event.type);});
返回事件的字符串(如"click")
$('#whichkey').bind('keydown',function(e){$('#log').html(e.type + ': ' + e.which );});
返回键盘和鼠标的按钮号
* 显示效果、动画(http://api.jquery.com/category/effects/)
* 基本(http://api.jquery.com/category/effects/basics/)
$("p").show(); //<p style="display: none">Hello</p>
显示隐藏的元素(style="display: none"或hide())
$('#book').show('slow', function() {});
逐渐显示隐藏的元素,可以传入一个速度参数(毫秒单位或slow,normal,fast)和一个完成回调
$("p").hide();
隐藏显示的元素
$("p").hide("slow");
逐渐隐藏显示的元素,可以传入一个速度参数(毫秒单位或slow,normal,fast)和一个完成回调
$("p").toggle(); //<p>Hello</p> <p style="display: none">Good Bye</p>
翻转显示,根据显示的状态决定显示还是隐藏(通常目标选择器总是选中两个节点,一个隐藏一个显示)
var flip = 0;$("button").click(function () {$("p").toggle((flip++ % 2)==0);});
根据布尔值决定是显示还是隐藏元素。
$("p").toggle(2000);
逐渐翻转显示,可传入一个完成回调
* 滑动出现(http://api.jquery.com/category/effects/sliding/)
$("div").slideDown("slow");
向下滑动逐渐显示,可传入速度参数和一个完成回调
$("div").slideUp();
向上滑动逐渐隐藏,可传入速度参数和一个完成回调
$("p").slideToggle();
向下滑动逐渐显示或向上滑动逐渐隐藏,可传入速度参数和一个完成回调
* 透明度渐变(http://api.jquery.com/category/effects/fading/)
$("div:hidden:first").fadeIn("slow");
渐进显示,可传入速度参数和一个完成回调
$("p").fadeOut("slow");
渐出隐藏,可传入速度参数和一个完成回调
$(this).fadeTo("slow", 0.33);
渐变到指定透明度,可传入速度参数,透明度和一个完成回调
$("p:first").fadeToggle("slow", "linear"); $("p:last").fadeToggle("fast", function () {$("#log").append("<div>finished</div>");});
如果对象可视,执行fadeOut,否则执行fadeIn,可以接收三种参数:持续时间或速度类型,缓动类型,结束回调。
* 定制
(http://api.jquery.com/category/effects/custom-effects/)
(http://api.jquery.com/category/data/)
$("#block").animate({width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em", borderWidth: "10px"}, 1500 );
定制动画,第一参数是哈希表表示style的变化趋势,第二参数是持续时间(毫秒单位或slow,normal,fast)
$(".block").animate({"left": "+=50px"}, "slow");
动画移动
$(".block").animate({height: "toggle", opacity: "toggle"},"slow");
动画翻转
jQuery.extend(jQuery.easing,{easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b;},});
$(".block").animate({width: "toggle", opacity: "toggle"},"slow", "easeInQuart");
编写动画的回调插件,第三参数传入回调名,第四参数可传入完成回调
$(".block").animate({width: "toggle", opacity: "toggle"},{duration: "slow", easing: "linear",complete: function(){alert("completed!");},step: function(s){$("#steps").text(s)}});
定制动画,第一参数设置style的变化趋势,第二参数设置duration(持续时间)、easing(变化规律)、complete(完成回调)、step(进帧回调)、queue(是否保存在队列中)
$(".block").stop();
停止动画
var n = $("div").queue(); $("span").text("Queue length is: " + n.length);
动画队列(目标可能有多个动画同时进行)
$("div").queue(function () {$(this).removeClass("newcolor");$(this).dequeue();});
在动画队列后添加一个回调
$("div").queue([]);
设置动画队列(通常用[]置空)
$(this).dequeue();
从队列开头取出然后执行(用于queue回调内执行)
$("div").clearQueue();
删除队列中还没有运行过的所有条目(包括非动画的回调函数),与.stop(true)相似但不同。
$("div.first").slideUp(300).delay(800).fadeIn(400);
延时指定的毫秒数,可以传入队列名作为第二参数。
* 设置
(http://api.jquery.com/category/effects/custom-effects/)
(http://api.jquery.com/category/properties/)
jQuery.fx.off = !$(this).attr("checked");
是否全局关闭动画效果
jQuery.fx.interval = 100;
动画的帧间隔时间,默认13毫秒,用于调整动画帧率。不会影响浏览器的requestAnimationFrame属性。
* 异步JavaScript和XML(Ajax)(http://api.jquery.com/category/ajax/)
* Ajax请求
(http://api.jquery.com/category/ajax/low-level-interface/)
(http://api.jquery.com/category/ajax/shorthand-methods/)
$.ajax({type: "GET",url: "test.js",dataType: "script"});
异步读取脚本
$.ajax({type: "POST",url:"some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );}});
异步发送参数,成功后把接受数据传给回调
$.ajax({url: "test.html",cache:false,success: function(html){$("#results").append(html);}});
获取最新的html内容
var html = $.ajax({url: "some.php",async: false}).responseText;
同步读取数据,代替回调方式的闭包进行数据读取。
var xmlDocument = [create xml document]; $.ajax({url: "page.php",processData: false,data: xmlDocument,success: handleResponse});
发送XML格式的数据(让processData为false避免文本转换)
$("#links").load("/jquery/ #top-news div[class=inner]");
读取HTML文本后插入到DOM中,第一参数是URL,可以使用url、#id和选择器,可以传入请求的键值对作为第二参数,完成回调为第三参数。
$.get("test.php");
GET方式发送HTML请求
$.get("test.php", { name: "John", time: "2pm" } );
GET方式发送带键值数据的HTML请求
$.get("test.php", function(data){alert("Data Loaded: " + data);});
使用回调接收返回的数据
$.get("test.cgi", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});
带键值数据的HTML GET请求,使用回调接收返回的数据。
$.getJSON("test.js", function(json){alert("JSON Data: " + json.users[3].name);});
使用回调接收返回的JSON对象
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);}); } );
带键值数据的HTML GET请求,使用回调接收返回的JSON对象(可以使用$().html()嵌入到HTML中)
$.getScript("test.js");
读取JavaScript脚本,然后执行
$.getScript("test.js", function(){alert("Script loaded and executed.");});
读取JavaScript脚本,然后执行,最后调用回调。
$.post('ajax/test.html', function(data) {$('.result').html(data);});
POST方式发送请求,通过回调获取返回的数据
$.post("test.php", { name: "John", time: "2pm" } );
POST方式发送带键值数据的HTML请求。
$.post("test.php", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});
POST方式发送带键值数据的HTML请求,用回调读取返回的数据
$.post("test.php", { "func": "getNameAndTime" },function(data){alert(data.name);console.log(data.time);}, "json");
POST方式发送带键值数据的HTML请求,用回调读取返回的数据,发送的数据格式为json
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {});
在发送数据前和执行.ajax()前定制Ajax选项或修改原有选项或保存jqXHR。
* Ajax事件(全局的回调函数,可附在任意jQuery对象上,常用于日志输出)(http://api.jquery.com/category/ajax/global-ajax-event-handlers/)
$("#msg").ajaxComplete(function(event,request, settings){$(this).append("<li>Request Complete.</li>");});
ajax通信结束后执行回调
$("#msg").ajaxError(function(event, request, settings){$(this).append("<li>Error requesting page " + settings.url + "</li>");});
ajax通信错误后执行回调
$("#msg").ajaxSend(function(evt, request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});
ajax通信发送前执行回调
$("#loading").ajaxStart(function(){$(this).show();});
ajax通信发送开始时执行回调
$("#loading").ajaxStop(function(){$(this).hide();});
ajax通信请求结束时执行回调
$("#msg").ajaxSuccess(function(evt, request, settings){$(this).append("<li>Successful Request!</li>");});
ajax通信请求成功时执行回调
* Ajax杂项
(http://api.jquery.com/category/ajax/helper-functions/)
(http://api.jquery.com/category/ajax/low-level-interface/)
$.ajaxSetup({url: "/xmlhttp/",global: false,type: "POST"});$.ajax({ data: myData });
设置Ajax请求的默认值,可反复设置(不影响全局的Ajax事件回调)
var str = $("form").serialize();
把表单数据转为=和&分隔的键值对字符串
var fields = $(":input").serializeArray();
把表单数据转为JSON对象
var params = { width:1680, height:1050 };var str = jQuery.param(params);
把对象转为=和&分割的URL参数字符串(类似.serialize())
* 实用工具
(http://api.jquery.com/category/miscellaneous/)
(http://api.jquery.com/category/utilities/)
* 用户代理
(http://api.jquery.com/category/utilities/)
(http://api.jquery.com/category/properties/)
$.support
哈希表,指出jQuery在不同浏览器上的特性差别
jQuery.browser
哈希表,指出当前浏览器类型和版本信息
jQuery.browser.version
浏览器版本号
jQuery.boxModel
是否使用W3C CSS Box Model,除了IE是false外其余都是true
* 数组和对象操作
(http://api.jquery.com/category/miscellaneous/collection-manipulation/)
(http://api.jquery.com/category/utilities/)
jQuery.each(arr, function() {$("#" + this).text("My id is " + this + ".");return (this != "four");});
遍历数组,this为数组元素,返回false时停止遍历
jQuery.each(obj, function(i, val) {$("#" + i).append(document.createTextNode(" - " + val));});
遍历哈希表的键值对,第一参数为键,第二参数为值。
$.extend(object1, object2);
把第二对象合并到第一对象,如果键名相同,前者的键值对被后者的键值对取代
$.extend(true, object1, object2);
递归合并(如果值为对象,值对象也进行合并)
var empty = {}; var settings = $.extend(empty, defaults, options);
合并后保存在新的对象上,不修改原来两个对象
arr = jQuery.grep(arr, function(n, i){return (n != 5 && i > 4);});
用闭包过滤(返回true的话保留)后返回结果,不影响原数组,闭包的第一参数是元素值,第二参数是数组索引,grep的第三参数如果传入true则翻转过滤
var arr = jQuery.makeArray(document.getElementsByTagName("div")); arr.reverse();
把对象转为数组
arr = jQuery.map(arr, function(n, i){return (n.toUpperCase() + i);});
用闭包把数组映射为新的数组。如果返回值为null不映射,如果返回数组则拼接到结果数组中。
jQuery.inArray("John", arr)
返回最初找到的索引,如果找不到,返回-1
divs = jQuery.unique(divs);
删除数组的重复元素然后返回结果。
* 检查(http://api.jquery.com/category/utilities/)
$.isArray([])
判断是否数组,如果是对象则返回false。
jQuery.isFunction(objs[i])
判断是否函数
* 字符串操作(http://api.jquery.com/category/utilities/)
str = jQuery.trim(str);
删除字符串前后的空白,然后返回。
* 内部使用(http://api.jquery.com/category/internals/)
* 数据缓存
(http://api.jquery.com/category/miscellaneous/data-storage/)
(http://api.jquery.com/category/data/)
var id = jQuery.data(e.target);
指定元素的内部处理的ID
var adiv = $("#adiv").get(0);var value;value = jQuery.data(adiv, "blah");
从元素的缓存中取出键名对应的值
var adiv = $("div").get(0);jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
从元素的缓存中保存键值对。
jQuery.removeData(adiv);
删除元素的缓存数据
jQuery.removeData(adiv, "test1");
通过键名删除元素缓存的键值对
* Ajax(http://api.jquery.com/category/miscellaneous/collection-manipulation/)
var params = { width:1680, height:1050 };var str = jQuery.param(params);
把对象转为=和&分割的URL参数字符串(类似.serialize())
* 新增
(http://api.jquery.com/category/internals/)
(http://api.jquery.com/category/properties/)
$("ul").context $("ul", document.body).context.nodeName
jQuery 1.3以后,获取jQuery对象上的DOM对象,主要用于插件。
jQuery.error = console.error;
重载error方法。jQuery.error是用于发送包含其第一参数字符串的异常
b = $('body'); if(b.jquery) {}; $.fn.jquery;
获取对象的jQuery版本字符串,可用于判断是否jQuery对象。
jQuery([]).pushStack( document.getElementsByTagName("div") ).remove().end();
把DOM元素集合压入jQuery堆栈
* (新增)插件(http://api.jquery.com/category/plugins/)
* 数据链接(http://api.jquery.com/category/plugins/data-link/)
var person = {};$("form").link(person);$("[name=firstName]").val("NewValue"); person.firstName;
把表单的修改绑定到特定的对象属性上
$("form").unlink(person);
移除表单的绑定
* 模板(把对象和数组渲染成HTML DOM)(http://api.jquery.com/category/plugins/templates/)
(TODO:现在仍处于beta阶段)
* (新增)延期对象(观察Ajax和动画的操作)(http://api.jquery.com/category/deferred-object/)
jQuery.Deferred()
创建延期对象。
$.get("test.php").always(function() {alert("$.get completed with success or error callback arguments"); });
不管成功还是失败都执行回调。
$.get("test.php").done(function(){alert("$.get succeeded");});
成功时执行回调。
$.get("test.php").done(function(){alert("$.get succeeded");}).fail(function(){alert("$.get failed!");});
失败时执行回调。
deferred.isRejected()
判断是否失败
deferred.isResolved()
判断是否成功
var defer = $.Deferred(),filtered = defer.pipe(function( value ) {return value * 2;});defer.resolve( 5 );filtered.done(function( value ) {alert( "Value is ( 2*5 = ) 10: " + value );});
成功过滤器,返回结果给.done的回调参数。
var defer = $.Deferred(),filtered = defer.pipe( null, function( value ) {return value * 3;});defer.reject( 6 );filtered.fail(function( value ) {alert( "Value is ( 3*6 = ) 18: " + value );});
失败过滤器,返回结果给.fail的回调参数。
var request = $.ajax( url, { dataType: "json" } ),chained = request.pipe(function( data ) {return $.ajax( url2, { data: { user: data.userId } } );});
串行执行ajax请求(链式任务)
function asyncEvent(){var dfd = new jQuery.Deferred();setTimeout(function(){dfd.resolve("hurray");}, Math.floor(Math.random()*1500));setTimeout(function(){dfd.reject("sorry");}, Math.floor(Math.random()*1500));return dfd.promise();}
$.when( asyncEvent() ).then(function(status){alert( status+', things are going well' );},function(status){alert( status+', you fail this time' );});
返回Promise对象(将来才得到真正的结果)
var obj = {hello: function( name ) {alert( "Hello " + name );}},defer = $.Deferred();defer.promise( obj );defer.resolve( "John" );
obj.done(function( name ){obj.hello( name );}).hello( "Karl" );
指定自定义的Promise对象(用于在.done()后链式调用)
deferred.reject(args)
手动执行失败句柄
deferred.rejectWith( context, [args] )
同reject,但指定this所指的对象
deferred.resolve( args )
手动执行成功句柄
deferred.resolveWith( context, [args] )
同resolve,但指定this所指的对象。
$.get("test.php").then(function(){ alert("$.get succeeded"); },function(){ alert("$.get failed!"); });
同时指定成功和失败句柄
var div = $( "<div />" );div.promise().done(function( arg1 ) {alert( this === div && arg1 === div );});
观察所有在jQuery对象上绑定的动作和动画完全结束,然后执行.done注册的句柄。
* (新增)工具(不包含上面重复的)(http://api.jquery.com/category/utilities/)
* 新增
jQuery.contains(document.documentElement, document.body);
判断第一参数的DOM是否包含第二参数DOM
jQuery.globalEval("var newVar = true;")
全局地执行JavaScript代码
jQuery.isEmptyObject({})
检查是否为没有属性的对象
jQuery.isPlainObject({}); console.log($.isPlainObject(document.location));
检查是否为纯对象(用{}和new Object创建,字符串字母值不是)
$.isWindow(window)
判断参数是否窗口
jQuery.isXMLDoc(document)
检查参数是否XML文档节点
var newArray = $.merge([], oldArray);
拼接两个数组并返回,但不改变参数。
jQuery.noop()
什么都不做,空函数。
jQuery.now()
当前时间,即(new Date).getTime()
var obj = jQuery.parseJSON('{"name":"John"}');alert( obj.name === "John" );
把JSON字符串转为JavaScript对象。
xmlDoc = $.parseXML( xml ),
把XML字符串转为XML文档对象。
jQuery.type(/test/)
返回参数的类名字符串
* (新增)数据(不包含上面重复的)(http://api.jquery.com/category/data/)
* 新增
jQuery.data(p, "testing", 123);$p.append(jQuery.hasData(p)+" "); jQuery.removeData(p, "testing");
判断是否有数据关联到jQuery对象上。
* (新增,TODO)现在仍处于beta阶段的API
* 模板(http://api.jquery.com/category/plugins/templates/)
(不完整,不准确,待修改)
相关推荐
这份"js&jquery学习笔记"应该包含对这些概念的详细解释,以及示例代码和练习,帮助读者理解和掌握这两种技术。对于初学者来说,这是一份宝贵的资源,能够快速上手JavaScript和jQuery,提升Web开发技能。
这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...
Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架,...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...
**jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
javascript和jquery的学习笔记,自己做的大家可以下载浏览,很不错
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
这份"javascript笔记"可能是作者根据自己的学习和实践整理而成,对初学者来说是非常宝贵的资源。笔记中可能涵盖了变量声明、数据类型(如字符串、数字、布尔值、对象、数组等)、运算符、流程控制(如条件语句和循环...
在本篇“jQuery学习笔记(二)”中,我们将深入探讨jQuery库的更多核心功能和常见用法。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这篇笔记将帮助你进一步...
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**: - **第三方**:jQuery是由第三方组织或个人编写的函数库,并非浏览器内置或开发者自定义的函数,因此使用前需从官方网站([www.jquery.com]...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
**jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...
《jQuery学习笔记详解》 jQuery,作为一款广泛应用于Web开发的JavaScript库,以其简洁的API、强大的功能和广泛的社区支持,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...
通过本文的学习,我们了解了 JavaScript 的基础语法和概念,以及 jQuery 如何简化了这些操作,使得开发者能够更加专注于应用逻辑而非细节。无论是对于初学者还是有经验的开发人员来说,掌握这两种技术都是非常重要的...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...
**jQuery学习笔记** jQuery是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画制作以及Ajax交互变得更加容易。这篇笔记将深入探讨jQuery的核心概念、常用...
这篇学习笔记将探讨这两个技术的基础和关键概念。 首先,JavaScript是一种轻量级的脚本语言,它主要在客户端运行,允许网页对用户交互做出实时响应。JavaScript的核心特性包括变量、数据类型(如字符串、数字、布尔...