什么是jQuery，有什么特点，有什么好处
jQuery是一个js文件，它是一个JavaScript框架或脚本库。
特点是，将一些原始js脚本封装。利用选择器查找要操作的节点，并且将这些节点封装成jQuery对象，只需要调用jQuery对象的方法或者属性，就可以实现对节点的操作。
这样做的好处是：可以兼容不同的浏览器（解决了大部分的兼容性问题），另外，代码也得到简化。便于脚本开发。类似jQuery框架很多,例如prototype,ExtJs,yahoo,等都是JavaScript框架。
jQuery编程的基本步骤
1. 利用选择器查找要操作的节点。 var $obj=$(‘#d1’);
2. 调用jQuery对象的方法或者属性。 $obj.css(‘color’,’red’);
jQuery对象
什么是jQuery对象
利用jQuery选择器选出的对象才是jQuery对象。jQuery对象是一个集合,集合元素是原有js中DOM对象。注意：只有jQuery对象才可以使用jQuery提供的函数
对象类型的转换
1. 将一个DOM对象转换成jQuery对象 $(DOM对象)
//原始js实现 function f1(){ var a1=document.getElementById("a1"); alert(a1.innerHTML); var $a1=$(a1);//将dom a1对象转换成jQuery对象 alert($a1.html()); }
2. 将一个jQuery对象转换成DOM对象
获取jQuery对象集合中的第一个DOM对象，jQuery对象[0] 或者jQuery对象.get(0)
//jQuery实现 function f2(){ //获取id=a1的HTML元素 var a1=$("#a1");//利用id选择器选择$("#id值") //获取a1中的html文本 alert(a1.html());//利用html()函数获取信息 //将jQuery对象转换成DOM对象 alert(a1[0].innerHTML);//a1[0] dom对象 //a1.get(0) jQuery函数,得到第一个元素 是DOM对象 alert(a1.get(0).innerHTML); }
3. 将一个字符串转换成jQuery对象 $(字符串)
function f3(){ var opt='<option value="1">北京</option>'; var $opt=$(opt);//将一个字符串转换成jQuery对象 alert($opt.html()); }
页面载入完毕执行指定函数fn
$(document).ready(function(){}); 或者 $(function(){});
//页面载入完毕后执行alert(),等价于onload事件 $(document).ready(function(){ alert($("#a1").html()); }); //更简洁写法 在页面载入完毕后执行 $(function(){ alert($("#a1").html()); })
jQuery选择器(参考文档)
什么是选择器？
jQuery借鉴了css选择器的语法，用来方便地查找要操作的节点。
基本选择器
1. 按id属性值选择 $("#id值")
2. 按class属性值选择 $(".class值")
3. 按元素名称选择 $("元素名称")
4. 选取所有元素 $(“*”)
5. 选取多个元素,用逗号隔开选择器 $("#c1,#c2")//选取id=c1和id=c2的元素
层级选择器
1. 父子关系 $("选择器1>选择器2")“>”代表父子关系
2. 祖先后代关系 $("选择器1 选择器2") （）
3. 前后关系 $("pre+next");(pre next紧挨着)
4. 兄弟关系(平级关系) $("pre ~ siblings")
简单选择器
1. 选第一个 :first
2. 选最后一个 :last
3. 选基数元素 :even
4. 选偶数元素 :odd
5. 选指定元素 :eq(索引)
6. 选大于指定值的元素 :gt(索引)
7. 选小于指定值的元素 :lt(索引)//索引值从0开始
内容选择器
1. 根据指定文本信息选择 :contains(text);
2. 匹配没有子元素或者文本为空 :empty
可见性选择器
1. 选择不可见元素 :hidden （input的type是hidden的，样式diplay：none的）
2. 选择可见元素 :visible
属性选择器
按属性值做条件选择 [属性名=属性值]
表单元素选择器
1. 选择所有表单元素,例如text,textarea,select :input
2. 选择type="text"类型的输入框 :text
3. 选择type="checkbox"类型元素 :checkbox
4. 其他:password,:hidden,:radio,:button,:image,:file
表单对象属性选择器
1. 选择可用表单元素 :enabled
2. 选择不可用表单元素 :disabled <input type=”text” disabled=”disabled”/>
3. 选择被选中的checkbox,radio :checked <input type=”checkbox” checked=”checked”/>
4. 选择被选中的select的option :selected <option value=”2” selected=”selected”>fdfgsgd<option/>
jQuery的dom操作
1. 查询节点；$(“选择器”); 找到一个节点以后，可以通过四个方法来访问节点的html内容、文件内容、属性值、值。 html() text() attr() val()
2. 创建节点；$(html);
3. 插入节点；append();作为最后一个孩子追加
jQuery属性和样式函数
属性函数
1. 属性操作
attr(属性名);//返回属性值 attr(属性名,属性值);//设置属性名=属性值
2. value属性操作
val();//返回value属性值 val(值);//设置value=值
3. 获取div或span等元素文本信息操作 (纯文本(即字符串))
text();//返回元素中的文本内容 相当于属性innerText text(值);//设置元素中的文本内容
4. 获取和设置div等元素的信息,内容当作HTML信息处理
html();//相当于属性innerHTML html(值);
5. class属性操作
addClass(值);//设置元素class="值" removeClass(值);//删除class属性中的值
addClass(值);//设置元素class="值" removeClass(值);//删除class属性中的值
css样式函数
1. css样式控制
css(样式属性)://获取样式属性的值 css(样式属性,值);//设置样式属性值
2. 宽和高的控制
width();//获取元素的宽 width(值);//设置元素的宽度 height();//获取元素的高 height();//设置元素的高度
jQuery事件函数
1. 页面载入
$(document).ready(function(){}) 或 $(function(){})
2. 基本事件
click();//触发单击事件,执行单击事件 click(fn);//为元素绑定一个单击处理 focus();//获取焦点 focus(fn); blur();//失去焦点 blur(fn); change();//选项改变 用于select中option选项改变时发生该事件 change(fn); unload(fn);//设置浏览器卸载页面前执行 mouseover();//鼠标移上去 mouseover(fn); mouseout();//鼠标移开 mouseout(fn);
3. 事件切换函数
hover(over,out);//鼠标移上去和移开两个事件,移上去执行over函数,移开执行out函数 toggle(f1,f2,f3....);//为一个元素绑定多个不同的单击处理事件,每次单击调用不同的fn
4. 事件处理函数
a.bind("事件类型",fn);为元素绑定指定类型的事件处理事件
$("#btn1").click(fn);
$("#btn1").bind("click",fn);
b.unbind("事件类型");为元素取消绑定的处理函数
$("#btn1").unbind("click");//取消click事件
$("#btn1").unbind();//取消绑定的所有事件
c.trigger("事件类型"); 触发元素绑定的事件处理
$("#btn1").click();
$("#btn1").trigger("click");
d.live("事件类型",fn); 为现有和将来动态添加的元素绑定指定类型的事件
文档处理
1. 创建文档对象 $("字符串")
2. 将文档对象添加到页面
append(对象);//将对象值插入到元素内部末尾处 prepend(对象);//将对象值插入到元素内部的前面 after(对象);//将对象值插入到元素后面 作为兄弟 before(对象);//将对象值插入到元素前面
3. 将文档元素删除
empty();//将元素内容清空 remove();//将元素删除
4. 将文档元素复制
clone();//复制元素 clone(true);//深度复制,可以将关联时间复制
5. 将文档元素利用新元素包裹起来
wrap(html);//利用指定的元素将文档元素包裹起来
6. 将文档元素替换
replaceWith(html);//利用html元素替换原有的
特效函数
主要实现隐藏和显示功能.
1. 基本效果
show();//将元素显示 show(speed);//在指定speed时间内完成显示.speed:参数值可以'slow','normal','fast'也可以使用数字1000,2000(毫秒) hide();//将元素隐藏 hide(speed);在指定时间内隐藏 toggle();//切换隐藏和显示.
2. 滑动效果(改变元素高)
slideDown(speed);//将元素显示 slideUp(speed);//将元素隐藏
3. 淡入淡出效果(改变元素的透明度)
fadeIn(speed);//将元素显示 fadeOut(speed); //将元素隐藏
4. 自定义动画：animate();
筛选函数
基于现有jQuery元素对象查找其他元素.
1. 过滤
a.eq(索引);//获取jQuery对象集合中某一个元素 not(选择器);//从jQuery对象集合中将符合选择器的元素排除返回剩下的元素. is(选择器);//从jQuery对象集合中获取符合选择器的元素 slice(begin,[end]);//从jQuery对象集合中获取begin-end的子元素
2. 查找
find(选择器);// 从当前jQuery集合中将符合选择器的后代元素返回. children(选择器);// 从当前jQuery集合中将符合选择器的子元素返回 parent();//获取当前jQuery对象的父元素 siblings();//获取当前jQuery对象的兄弟
工具函数
$.trim(str);//字符串过滤空格,只过滤前后空格 $.each(集合,fn);// 循环操作,每一个元素触发fn处理
JQuery对ajax编程的支持
load
作用：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
语法：load( url, [data], [callback] )
url：地址。
data：请求参数，请求参数有两种形式:第一种：请求字符串 比如 "flight=ca1234&dest=bj"。 第二种：对象 比如: {'flight':'ca1234','dest':'bj'}
callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。
load方法如果没有请求参数，会发送get请求，如果有请求参数，则会发送post请求。
案例：在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。
$("#myID").load(
"welcome.php",
{"lname" : "Cai", "fname" : "Adam"},
function(){
$("#myID").fadeIn('slow');}
);
});
$.get
作用：向服务器发送异步请求，请求方式是get方式。
语法：$.get(请求地址,[data],[callback],[type]);
data:请求参数
callback:用来处理服务器返回的数据，格式:function(data,statusText),其中,data是服务器返回的数据，statusText是一个状态描述。
type:服务器返回的数据类型，可以是: text : 普通的文本 html : html文档 json : json字符串 xml : xml文档 script: javascript脚本
$.post
用法同$.get,只不过发送的是post请求。传递多个参数值：$.post('url',{参数1:'值1',参数2:'值2'},回调函数)
$.ajax
语法：$.ajax({'':'','':''});属性名用来设订一些选项：
url: 请求地址
type: 请求方式(get post)
data: 请求参数
dataType: 服务器返回的数据类型(text,html,json,xml,script)
success: 成功以后调用的函数:function(data,statusText),其中,data是服务器返回的数据，statusText是一个状态描述。
error:失败以后调用的函数:function(xhr,status,errorThrown),其中，xhr表示XMLHttpRequest对象,status,errorThrown其中有一个可以获得错误信息。
async: 当值为true(缺省值)，表示发送异步请求。当值为false,表示发送同步请求。