jquery复习笔记
2014-11-19 16:47 super2046 阅读(336) 评论(0) 编辑 收藏 举报一、jquery
下载地址http://jquery.com/download/
一、基本知识
- aspx中引入js:<script src=”” 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=””></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=’#’]”),$(“[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(){}) |
点击 |
双击 |
|
error():$(“#id”).error(function(){$(“#id”) .replacewith(“<div>无法显示…</div>”)}) |
|
focus():$(“#id”).focus(function(){}) |
鼠标焦点落在对象引起,和blur相反 |
keydown():$(“#id”).keydown(function(){}) |
按下按键 |
按下按键和放起来 |
|
按下后起来 |
|
$(“img”).load()-对象加载(非页面).ready页面主要元素加载完(有时候img不一定加载) |
|
鼠标按下 |
|
鼠标进入,一般搭配$().css({}) |
|
鼠标离开元素本身,子元素不计算在内 |
|
mousemove():$(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); |
鼠标移动(在$对象上) |
鼠标离开元素本身或者子元素都会引发 |
|
鼠标在对象上 |
|
点击放开引起 |
|
resize():$(window).resize(function(){}) |
窗体大小改变引起,对象一般是window |
scroll():$(“div”).scroll(function(){}) |
拖动条被拖动的时候 |
鼠标选择 |
|
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”). |
描述 |
向匹配的元素添加指定的类名。 |
|
在匹配的元素之后插入内容。 |
|
向匹配的元素内部追加内容。 |
|
$(“content”).appendTo(“#id”); |
向匹配的元素内部追加内容。 |
设置或返回匹配元素的属性和值。 |
|
在每个匹配的元素之前插入内容。 |
|
clone();clone完后用append等插入 |
创建匹配元素集合的副本。 |
detach();无参数 |
从 DOM 中移除匹配元素集合。prepend();可恢复 |
empty();无参数 |
删除匹配的元素集合中所有的子节点。 |
检查匹配的元素是否拥有指定的类。 |
|
html(“content”);无参数表示返回 |
设置或返回匹配的元素集合中的 HTML 内容。 |
$(content).insertAfter(“#id”); |
把匹配的元素插入到另一个指定的元素集合的后面。 |
把匹配的元素插入到另一个指定的元素集合的前面。 |
|
向每个匹配的元素内部前置内容。 |
|
向每个匹配的元素内部前置内容。 |
|
remove();无参数 |
移除所有匹配的元素。 |
从所有匹配的元素中移除指定的属性。 |
|
从所有匹配的元素中删除全部或者指定的类。 |
|
replaceAll(content);替换所有选择器匹配content的内容 |
用匹配的元素替换所有匹配到的元素。 |
用新内容替换匹配如:#id的元素。 |
|
text(content);无参数表示获取text |
设置或返回匹配元素的内容。 |
从匹配的元素中添加或删除一个类。常用于类特效的切换 |
|
移除并替换指定元素的父元素。如css中定义div p这类,去掉div剩下p |
|
设置或返回匹配元素的值。多数是Input类元素的value |
|
把匹配的元素用指定的内容或元素包裹起来。如 $(“p”).wrap(“div”)<=>p-><div><p>…..</div>-添加了div |
|
wrapAll();类似上面 |
把所有匹配的元素用指定的内容或元素包裹起来。 |
添加到p的内部: $(“p”).wrapinner(“<b></>”)<=><p><b></b></p> |
八、jq的属性操作
方法 |
描述 |
向匹配的元素添加指定的类名。 |
|
设置或返回匹配元素的属性和值。 |
|
检查匹配的元素是否拥有指定的类。 |
|
设置或返回匹配的元素集合中的 HTML 内容。 |
|
从所有匹配的元素中移除指定的属性。 |
|
从所有匹配的元素中删除全部或者指定的类。 |
|
从匹配的元素中添加或删除一个类。 |
|
设置或返回匹配元素的值。 |
九、jq的css操作
CSS 属性 |
描述 |
设置或返回匹配元素的样式属性。 |
|
设置或返回匹配元素的高度。 |
|
返回第一个匹配元素相对于文档的位置。 |
|
返回最近的定位祖先元素。 |
|
返回第一个匹配元素相对于父元素的位置。 |
|
设置或返回匹配元素相对滚动条顶部的偏移。 |
|
设置或返回匹配元素相对滚动条左侧的偏移。 |
|
设置或返回匹配元素的宽度。 |
十、JQ的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的数据存储
函数 |
描述 |
存储与匹配元素相关的任意数据。应用:$(“div”).date(“var1”) |
|
jQuery.data() |
存储与指定元素相关的任意数据。 |
.removeData() |
移除之前存放的数据。 |
jQuery.removeData() |
移除之前存放的数据。 |
十三、jq核心
函数 |
描述 |
接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器。 |
|
运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。 |
省略了一些重复的内容(本笔记完)