首页 > 代码库 > jquery复习笔记
jquery复习笔记
一、jquery
下载地址http://jquery.com/download/
一、基本知识
- aspx中引入js:<script src=http://www.mamicode.com/”” type=”text/javascript” ></script>
- Jq和$:可以理解为$为jq函数代表符号，$==jquery,$用法：
（1） html文档加载第一个运行：$(function(){}),$(函数名)
（2） 选择html标签并返回jq的集合：$(“div等标签、Id”).属性如css等（”属性”,”值”）
（3） 生成DOM， $(Html) 如$(“<div><p>添加入div和phtml元素</p></div>”)
（4） 将一个或者多个DOM元素封装成jq集合，$(element)
（5） $,没有参数直接表示返回一个jq集合
二、操作DOM元素
1.处理事件：$(“#id”/”.name”).事件click等(函数)
2.处理元素内容：
(1)$(“#id”/”.name”).html()表示获取id、name的html元素的内容不含本身（源代码），$(“#id”/”.name”).html(“内容”)表示向id的html元素添加上“内容”
（2）$(“#id”/”name”).val();获取元素的值，一般都是Text属性的值，如果val（”内容”）则把元素的值设置为“内容”
3.更改元素样式:
(1)基本设定css：$(“#id”).css(属性name,value)
(2)利用已经定义好的css-class：
添加：$(“#id”).addclass(‘classname’);移除：$(“#id”).removeclassname(‘class’)；
切换：$(“#id”).toggleclass(‘classname2’);//在添加、移除classname2中转换
(3)鼠标经过：$(“#id”).hove(function(){//鼠标over执行的代码},funciton(){//鼠标out的代码};)
4.隐藏和显示元素：
$(“#id”).hide(speed,callback);//参数为隐藏显示的速度，动态效果：normal，fast等
$(“#id”).show(speed,callback);
三、jq常用的选择器（getElementBy(‘选择器’)）$(“选择器”)
1.元素选择器：a,tr,div,input等$(’div‘).***
2.Id：$(‘#id’).**, $(‘div#id’)必须用#指明ID，和css代码原理一样的,(‘标签类型#ID’)
3.class：$(‘.classname’).**
4.后代选择：$(‘div p’)0**;表示<div><p>***
5.子元素选择：$(‘div#id’)> $(‘p’);大于号A>B表示直接选择A选择器中符合B选择的元素
四、jquery+asp.net web service实现AJAX:
$.ajax(‘参数对象’)//可以理解为form的属性
$.ajax(
｛
type:’post’, //post get ,像form的method
url:’*.aspx’,//action
data:’{$(‘$id).val()}’,//传递给webservice的参数
contentType:”application/json;charset:utf-8”,// 数据编码类型，form提交的数据
dataType:”json”,参数类型
success:function(参数){函数; }//ajax调用成功后执行的函数
error: funciton(参数){函数;}//ajax调用失败执行的函数
｝
)
二、W3c标准jq 知识补充
1.js的load对应jq的$(document).ready(functionname)
2.加载jq:<script type=”text/javascript” src=http://www.mamicode.com/””></script>，这里需要补充的是src可以直接引用jq官网的jq文件，不一定需要自己保存在网站空间中:
src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js(google)
src= http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js(Microsoft)
3.几个基础的语法：$(selector).action()
$(“#id”,”.classname”,”p”,”div”,”div .classname”).hide();
$(document).ready(functionname);
（1）元素选择器：
$(“p”)-select html元素；$(“#id”)-选择id为id的，$(“.classname”)-选择class=classname的，
$(“div p”)-<div>中<p>,空格表示里面的；
$(“p.class”)-选择class=class元素中的第一个<p>；$(“p#id”)选择id元素中第一个<p>；
$("div#intro .head")-id="intro" 的 <div> 元素中的所有 class="head" 的元素；
（2）属性选择：$[属性=值]
$(“[href]”);$(“[href=http://www.mamicode.com/’#’]”),$(“[href!=’#’]”);$(“[href$=’.jpg’]”)-$=表示类是，like %.jpg%
（3）css选择：$(“元素div,#id,.Class”).css(“background-color”,”red”);等同js：style.属性=value
4.为了防止跟js使用$符号的冲突，当出现js和jq混用，$可以用var jq=JQuery-noconflict()表示$;
5.jq事件
$(selector).event(function(){});event主要有：click,dblclick,focus,mouseover
6效果：
关于效果主要利用一下几个函数配合使用：
（1）隐藏和显示：$(“#id”).hide(speed)和$(“#id”).show(speed)-，speed可以为具体数字（1000=1s），也可以是常规的normal fast slow等
（2）滑动函数：$(“#id”).slideToggel():一般流程都是先设置某个元素的display为none（不设置也可以的），然后设置$(“元素”).slideToggle(speed);就可以在none和可见中滑动方式切换；slideDown,slideUp,下滑显示、上滑消失
（3）切换状态：$(“#id”).toggle(speed);相当于同一个元素执行show和hide
（4）颜色渐变：
$(“#id”).fadeTo(speed,透明度),把颜色透明度转变到特定的透明度;
fadeIn(speed,callbackfunction),透明逐渐减少地出现;
fadeout(speed,callbackfunction);透明渐变，直至消失;
（5）自定义动画-$(selector).animate({params},[duration],[easing],[callback]);
一般情况下等都使用这样的简便模式，例如：
$(“#id”).animate({height:100px,opacity:0.1},”slow”);//状态1
$(“#id”).animate({height:200px,opacity:0.5},”slow”);//状态2，形状变化
$(“#id”).animate({left:100px,opacity:0.1},”slow”);//状态3.移动，移动类div要设置position:relative或者absolute
7.callback函数：能够避免前面函数启动后还没执行完毕（如渐变类），后面的函数就开始了
8.jq的HTML操作：
（1）$(#delector).html(“conent”):相当于innerHTML,把内容改变成为…“=”
（2）$(#selector).append(“”),在原有内容的后面添加新内容，“+=”
（3）$(#delector).after(“”)/before(“”),添加在selector后面、前面(元素之外，如<img />23) 和$(“<span>插入内容</span>”).insertAfter(“p”);相似
9.jq操作css（sytle）
$(#selector).css(name.value)-单个css的属性，如height ，width，backgoundColor
$(#deledtor).css({property})-类似css的｛｝
$(#selector).css(name)-返回css某属性的值
10.jq的size操作：（相当于简化css的height和width）
$(selctor).height/width(“value”)
11.jq延迟队列操作：
clearQueue()-清空排队未执行的事件
delay()-延迟
queue()-显示队列函数
三、Jquery-- AJAX函数
（一）基本理论：例如通过AJAX引用txt文件，改变内容：$(“#div”).load(“///*.txt”);在div上读取txt并写在里面
小知识：AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新（用于不重载和局部提交）
（二）常用方法
1.$(selector).load(url,data,callback)-一般都是直接使用URL参数
2.$.ajax(option)- option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数,把远程数据加载到XMLHttpRequest
3.$.get(url,data,callback,type)-使用HTML get加载远程数据
4.$.post(url,data,datacallback,type)-使用HTML post加载远程数据
5.$.getJSON(url,data,callback)-get获取json的数据
6.$.getScript(url,callback)-加载并执行远程的js文件
(selector) jQuery 元素选择器语法
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
四．Jquery选择器知识补充
这里补充一些上面没记录的选择器：
$(“*”)-选择所有元素；
$(“.class1.class2”),class=class1且 =class2；
$(“p:first”)-第一个<p>元素，p:last原理类推；
$(“tr:even”)-所有偶数tr元素；
$(“tr:odd”)-所有奇数tr元素；
$(“ul li:eq(i)”)-从第i+1个元素开始（索引0开始的）；
$(“ul li:gt(i)”)-列出索引大于i的元素
$(“ul li:lt(i)”)-列出索引小于i的元素
$(“input :not(:empty)”)-列出所有不为空的input元素
$(“:header”)-列出<h1><h2>等所有标题元素
$(“animated”)-所有动画元素
$(“:contains(‘s’)”)-所有含有s的元素
$(“:empty”)-无子元素节点的所有元素
$(“p:hidden”)-所有隐藏的p元素,相对的是visible
$(“th,td,.class,#id”)多个被匹配的元素
$(“:input”)所有<input>的元素
$(“:text”)所有<…type=”text”…>
$(“:password”)-<type=”password”>,其他类似submit ,reset,radio,checkbox，button，image等等
此外还可以选择状态的：$(“:enable”),”:disable”;”:selected”,”:checked”
五、jquery事件方法
$(”button#id”).click(function(){$(“img”).hide();})
此外还有其他方法
方法 | 描述 |
ready():$(document).ready(function(){}) | 文档就绪事件（当 HTML 文档就绪可用时） |
blur():$(“#id”).blur(function(){}) | 失去标点时发生 |
change()：$(“#id”).change(function(){}) | 字体改变和select改变引起的方法 |
click():$(“#id”).click(function(){}) | 点击 |
dblclick(): | 双击 |
error():$(“#id”).error(function(){$(“#id”) .replacewith(“<div>无法显示…</div>”)}) |
|
focus():$(“#id”).focus(function(){}) | 鼠标焦点落在对象引起，和blur相反 |
keydown():$(“#id”).keydown(function(){}) | 按下按键 |
keypress() | 按下按键和放起来 |
keyup() | 按下后起来 |
load() | $(“img”).load()-对象加载（非页面）.ready页面主要元素加载完（有时候img不一定加载） |
mousedown() | 鼠标按下 |
mouseenter() | 鼠标进入，一般搭配$().css（｛｝） |
mouseleave() | 鼠标离开元素本身，子元素不计算在内 |
mousemove():$(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); | 鼠标移动（在$对象上） |
mouseout()： | 鼠标离开元素本身或者子元素都会引发 |
mouseover()： | 鼠标在对象上 |
mouseup()： | 点击放开引起 |
resize()：$(window).resize(function(){}) | 窗体大小改变引起,对象一般是window |
scroll()：$(“div”).scroll(function(){}) | 拖动条被拖动的时候 |
select()： | 鼠标选择 |
submit()： | Form提交的时候发生 |
unload()： | 卸载对象的时候 |
六 jquery的事件处理方法
事件处理方法把事件处理器绑定至匹配元素中（添加事件）。
$(“selector”).bind(eventtype（类型）,data,function(){})-添加一个或者更多的事件处理器;
$(“selector”).unbind();移除bind定的方法
$(selector).delegate(selector1,eventtype（类型click等）,function(){})-添加事件;可以是后来用代码生成的
…undelegate();移除绑定
$(selector).live(eventtype ,data,function(){})-添加event
$(selector).die(eventtype,function(){})-移除所有的由live添加的事件处理器,无参数表示全部
$(selector).trigger(eventtype,data,function(){})-为所有匹配的因素指定事件
$(selector).trigger(eventtype,function(){})-
$(delector).one(event ,data1,data2….)-添加一次执行的事件监听器
七、jquery 文档操作(带测试)
除了html()外，其余方法都对XML和HTML适用
方法$(“#id”). | 描述 |
addClass(“classname”); | 向匹配的元素添加指定的类名。 |
after(“content”); | 在匹配的元素之后插入内容。 |
append(“content”); | 向匹配的元素内部追加内容。 |
$(“content”).appendTo(“#id”); | 向匹配的元素内部追加内容。 |
attr(“attribute”,value); | 设置或返回匹配元素的属性和值。 |
before(“content”); | 在每个匹配的元素之前插入内容。 |
clone();clone完后用append等插入 | 创建匹配元素集合的副本。 |
detach();无参数 | 从 DOM 中移除匹配元素集合。prepend();可恢复 |
empty();无参数 | 删除匹配的元素集合中所有的子节点。 |
hasClass(“classname”); | 检查匹配的元素是否拥有指定的类。 |
html(“content”);无参数表示返回 | 设置或返回匹配的元素集合中的 HTML 内容。 |
$(content).insertAfter(“#id”); | 把匹配的元素插入到另一个指定的元素集合的后面。 |
insertBefore();同上 | 把匹配的元素插入到另一个指定的元素集合的前面。 |
prepend(content); | 向每个匹配的元素内部前置内容。 |
prependTo(); | 向每个匹配的元素内部前置内容。 |
remove();无参数 | 移除所有匹配的元素。 |
removeAttr(“class/id”); | 从所有匹配的元素中移除指定的属性。 |
removeClass(“classname”); | 从所有匹配的元素中删除全部或者指定的类。 |
replaceAll(content);替换所有选择器匹配content的内容 | 用匹配的元素替换所有匹配到的元素。 |
replaceWith(content); | 用新内容替换匹配如：#id的元素。 |
text(content);无参数表示获取text | 设置或返回匹配元素的内容。 |
toggleClass(“classname”); | 从匹配的元素中添加或删除一个类。常用于类特效的切换 |
unwrap(“div“); | 移除并替换指定元素的父元素。如css中定义div p这类，去掉div剩下p |
val(“input“); | 设置或返回匹配元素的值。多数是Input类元素的value |
wrap(“div”); | 把匹配的元素用指定的内容或元素包裹起来。如 $(“p”).wrap(“div”)<=>p-><div><p>…..</div>-添加了div |
wrapAll();类似上面 | 把所有匹配的元素用指定的内容或元素包裹起来。 |
wrapinner(“<b></b>”); | 添加到p的内部： $(“p”).wrapinner(“<b></>”)<=><p><b></b></p> |
八、jq的属性操作
方法 | 描述 |
addClass() | 向匹配的元素添加指定的类名。 |
attr() | 设置或返回匹配元素的属性和值。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
val() | 设置或返回匹配元素的值。 |
九、jq的css操作
CSS 属性 | 描述 |
css() | 设置或返回匹配元素的样式属性。 |
height() | 设置或返回匹配元素的高度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
width() | 设置或返回匹配元素的宽度。 |
十、JQ的AJAX
函数 | 描述 |
jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
.ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
.ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 |
.load() | 从服务器加载数据，然后把返回到 HTML 放入匹配元素。 |
jQuery.param() | 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 |
jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
.serialize() | 将表单元素集合作为提交的字符进行编码。 |
.serializeArray() | 将表单元素集合作为数据的名称和值进行编码。 |
十一、jq的遍历
函数 | 描述 |
.add() | 将元素添加到匹配元素的集合中。 |
.andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
.children() | 获得匹配元素集合中每个元素的所有子元素。 |
.closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 |
.contents() | 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。 |
.each() | 对 jQuery 对象进行迭代，为每个匹配元素执行函数。 |
.end() | 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 |
.eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
.filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
.find() | 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 |
.first() | 将匹配元素集合缩减为集合中的第一个元素。 |
.has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
.is() | 根据选择器检查当前的匹配元素集合，如果存在至少一个匹配元素，则返回 true。 |
.last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
.map() | 把当前匹配集合中的每个元素传递给一个函数，产生包含返回值的新的 JQuery 对象。 |
.next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
.nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。 |
.nextUntil() | 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。 |
.not() | 从匹配元素集合中删除元素。 |
.offsetParent() | 获得用于定位的第一个父元素。 |
.parent() | 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 |
.parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 |
.prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 |
.prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 |
.prevUntil() | 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 |
.siblings() | 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。 |
.slice() | 将匹配元素集合缩减为指定范围的子集。 |
十二、jq的数据存储
函数 | 描述 |
.data(var[i],value) | 存储与匹配元素相关的任意数据。应用：$(“div”).date(“var1”) |
jQuery.data() | 存储与指定元素相关的任意数据。 |
.removeData() | 移除之前存放的数据。 |
jQuery.removeData() | 移除之前存放的数据。 |
十三、jq核心
函数 | 描述 |
jQuery() | 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。 |
jQuery.noConflict() | 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。 |
省略了一些重复的内容（本笔记完）
jquery复习笔记