jQuery学习笔记
jQuery
1.1jQuery简介
jQuery是一个JavaScript库，极大的简化了JavaScript编程jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
1.2jQuery的导入
- 可以选择从jQuery官网下载
- 使用其他公司的CDN加载
Google的CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
Microsoft的CDN
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
新浪的CDN
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
1.3jQuery的语法
使用jQuery时，$就相当于jQuery
文档就绪函数
$(document).ready(function(){
....
});
这个函数也可以简写成
$(function(){
...
});
1.3.1jQuery选择器
与css选择器语法类似
$("p").hide();-->隐藏所有p标签元素
$(this).hide();-->隐藏当前元素 --元素选择器
$("#test").hide();-->隐藏id值为test的元素 --id选择器
$(".test").hide();-->隐藏class值为test的元素 --类选择器
$("p .test").hide();-->隐藏p标签下的所有后代class值为test的元素 --后代选择器
$("p>.test").hide();-->隐藏p标签下的所有子代class值为test的元素 --子代选择器
$("p+.test").hide();-->隐藏p标签相邻下一下兄弟标签class值为test的元素 --相邻兄弟选择器
$("p~.test").hide();-->隐藏p标签相邻所有兄弟标签class值为test的元素 --通用兄弟选择器
过滤选择器：
$("ul li:first") 选择ul标签下的第一个li
$("ul li:eq(0)") 选择ul标签下的第一个li
$("ul li:not(:first)") 选择ul标签下除了第一个li的其他所有li
$("ul li:gt(1)") 选择ul标签下索引值大于1的所有li
$("ul li:gt(4)") 选择ul标签下索引值小于4的所有li
属性选择器：
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='.jpg']") 选取所有 href 值以 ".jpg" 开头的元素。
1.3.2jQuery的css选择器
通过jQuery选择器选中元素后就能使用css选择器来设置样式。
格式：$(选择器).css("属性","属性值");
设置多个属性：$(选择器).css({"属性":"属性值","属性":"属性值"})
1.3.3jQuery的事件
常用的事件：
| 方法 | 描述 |
|---|---|
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| click() | 触发、或将函数绑定到指定元素的单击事件 |
| dblclick() | 触发、或将函数绑定到指定元素的双击事件 |
| focus() | 触发、或将函数绑定到指定元素的获得焦点事件 |
| blur() | 触发、或将函数绑定到指定元素的失去焦点事件 |
| mouseover() | 触发或将函数绑定到被选元素的鼠标悬停事件 |
| mouseout() | 触发或将函数绑定到被选元素的鼠标移出事件 |
其中mouseover()和mouseout()方法同时出现，故jQuery将这两个方法封装成了一个：hover(funOver,funOut)需要两个函数，一个对应悬停一个对应移出。一个元素可以添加（追加）多个事件实现链式编程。
$("p").mouseover(function(){
$(this).css("color","red");
}).mouseout(function(){
$(this).css("color","blue");
})
1.4jQuery效果
1.4.1显示和隐藏
隐藏
$(selector).hide(speed,callback);
显示
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
toggle()-->$(selector).toggle(speed,callback);
使用 toggle() 方法可以来回切换 hide() 和 show() 方法
1.4.2淡入和淡出
淡入
$(selector).fadeIn(speed,callback)；
淡出
$(selector).fadeOut(speed,callback);
淡入/淡出
$(selector).fadeToggle(speed,callback);
变透明
$(selector).fadeTo(speed,opacity,callback);
其中必选的参数是speed和opacity(透明度)
淡入和淡出与显示和隐藏的区别为，前者元素大小不会变，根据设定的速度隐藏，后者元素大小会改变，根据设定的速度隐藏。
1.4.3滑动
向下滑动
$(selector).slideDown(speed,callback);
向上滑动
$(selector).slideUp(speed,callback);
向上/向下滑动
$(selector).slideToggle(speed,callback);
参数都是可选的
1.5jQuery操作DOM
DOM即Document Object Model文档对象模型。使用jQuery获取和设置内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回匹配元素的值
使用html()获取元素内容时，如果内容里有标签则会带着标签一起获取即不解析，但使用html设置元素内容时，如果内容有标签则会解析。
获取属性值
- attr("属性名") - 设置或返回匹配元素的属性和值。
- prop("属性名") - 设置或返回匹配元素的属性和值。
这两个的区别是attr()如果没有获取到会返回undefined，prop()如果没有获取到会返回false。
设置属性值：attr("属性名","属性值")也可以设置多个属性格式也是和设置css一样attr({"属性名":"属性值","属性名":"属性值"})
1.5.1添加和删除
| 方法 | 描述 |
|---|---|
| append() | 在被选中的元素的结尾添加内容 |
| prepend() | 在被选中的元素的开头添加内容 |
| after() | 在被选中的元素之后添加内容 |
| before() | 在被选中的元素之前插入内容 |
| remove() | 删除被选的元素及其子元素 |
| empty() | 删除被选元素的子元素 |
remove()方法可以接收一个参数，对被删除的元素进行过滤，该参数可以是任何 jQuery 选择器的语法，例如：
<p class="p1">哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
$("p").remove(".p1");则会删除class值为p1的p标签
1.5.2操作css
| 方法 | 描述 |
|---|---|
| addClass() | 向被选元素添加一个或多个类 |
| removeClass() | 从被选元素删除一个或多个类 |
| toggleClass() | 对被选元素进行添加/删除类的切换操作 |
这里的添加类指的是给所选元素添加class属性，从而操作样式。
1.5.3元素遍历
$(selector).each(function(i,v)),i表示元素的下标，v表示当前元素
1.5.4节点关系
| 方法 | 描述 |
|---|---|
| parent() | 返回被选元素的直接父元素（返回的是一个集合） |
| children() | 返回被选元素的所有直接子元素 |
| find() | 返回被选元素的后代元素，一路向下直到最后一个后代 |
| siblings() | 返回被选元素的所有同胞元素(上下都包括) |
| next() | 返回被选元素的下一个同胞元素 |
1.6$冲突
在jQuery里，$符相当于jQuery，但是有些脚本语言也使用$，为了解决冲突，有几种解决办法：
- $.noConflict(),禁用$符，此时想使用jQuery就得使用jQuery关键字
- var 代替字 = $.noConflict()，使用你定义的代替字来代替$
- 把$作为局部变量
如：
jQuery(function($){
$("p").hide();
});
1.7jQuery ajax
jQuery 提供多个与 AJAX 有关的方法,通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
1.7.1ajax()方法
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
ajax()方法可选的参数很多，常用的有如下几个
url:发送请求的地址
type:请求类型，默认为get
success()：请求成功之后的回调函数
data：发送到服务器的数据，会自动转换为请求字符串格式
dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
contentType：发送信息至服务器时内容编码类型，默认值: "application/x-www-form-urlencoded"
例子
$.ajax({
url:"servlet1",
type:"get",
data:"username=zhangsan&age=20",
dataType:"html",
contentType:"text/plain",
success:function (msg,status) {
$("#mydiv").append(msg);
alert(status);
}
});
1.7.2$.get()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据, 相比ajax()方法要简单，也更好用，语法:$.get(url,callback);必选的url（请求资源路径）参数，和可选的callback（回调函数）参数，如果需要传参，在url后面加:$.get(url,data,callback)
回调函数里的data参数表示服务器传回的数据，相当于ajax里的xhr.responseText
$.get("servlet1","username=zhangsan&age=20",function(data){
...
})
1.7.3$.post()方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据, 语法：$.post(URL,data,callback);其中，url是必选的参数其他都是可选参数
浙公网安备 33010602011771号