jquery复习笔记

一、jquery

下载地址http://jquery.com/download/

一、基本知识

1. aspx中引入js:<script src=”” type=”text/javascript” ></script>
2. 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();})

此外还有其他方法

六 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适用

八、jq的属性操作

九、jq的css操作

十、JQ的AJAX

十一、jq的遍历

十二、jq的数据存储

十三、jq核心

省略了一些重复的内容（本笔记完）