上海怡胜
IT技术交流QQ群：378333774
www.ysitroad.net
javaScript的核心API很简单，但是由于浏览器之间的不兼容，导致客户端的API很复杂，为了简化通用操作，隐藏浏览器之间的差异，就可以通过js框架和工具类库完成，其中比较流行的就是jQuery库了;
jQuery能做什么？
jQuery能让你更轻松的找到关心的元素，并对这些元素进行操作：添加内容、编辑HTML属性和CSS属性，定义事件处理程序，以及执行动画，它还拥有Ajax工具来动态发起HTTP请求，以及一些通用的工具函数来操作对象和数组；
（简而言之，就是方便DOM的选取和操作，响应用户的操作（事件、动画），简化Ajax操作）
jQuery的下载使用：
我们要使用jQuery，可以从http：//jquery.com下载该类库，然后倒入到web中就可以使用了；
另外一种引入方式是使用内容分发网络，利用jquery网络上的url，即映射文件，比如：
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">script>
jQuery官网下载地址：http://docs.jquery.com/Downloading_jQuery
下载的jQuery版本有压缩的和未压缩的，还有映射文件；
jQuery语法：
基础语法：
1 jQuery（）函数：
$(selector).action() ---selector 选择器 action() 对元素进行操作
jQuery类库定义了一个全局函数：jQuery（） 用$可以代表它，就相当于它的一个别名；
例如：获取文档中所有的元素， var div=$(“div”) 即可，返回dom元素，即jQuery对象；jQuery（）非构造函数，是工厂函数，其不是new出来的；
链式调用：
$(“p.details”).css(“background-color”,”yellow”).show(“fast”)
(a) jQuery()函数的4种调用方式：
1.传递css选择器（字符串形式）给$() $(“p”).css()
2.传递一个Element、Document或Window对象给$() $(document) 或 $(this)
3.传递HTML文本字符串
a) 注意，不要传入纯文本，否则会将其认为css选择器进行解析，所以传入的字符串必须至少带有一个尖括号的html标签；
4.传入函数
对于该方式，表示当文档加载完毕且DOM可操作时，传入的函数将被调用；
$(function(){.....})
其老式的写法：$(document).ready(function(){}) --文档就绪函数
(b) 查询
传递css选择器字符串给$(),返回对象表示的是匹配到（选中）的元素集；
那么它就具有类数组的功能，比如length属性，或者通过[]访问具体元素
$(“body”).length
$(“body”)[0]
$()和querySelectotAll()比较：
其实$() 功能与 DOM操作里的querySelectorAll() 方法类似：
都传递CSS选择器作为参数，并且返回的都是类数组对象来存放匹配选择器的元素；
不同：
$()支持大部分浏览器，而querySelectorAll()在较新的浏览器才支持；
$()返回的被称为jQuery对象，而querySelectorAll()返回的是NodeList，前者用途更大些；
jQuery的一些方法：
each():
访问jQuery对象中的所有元素时，可以使用each（）来代替for循环；
该方法，接收一个回调函数作为唯一参数，然后会对jQuery()对象中的每一元素调用该回调函数；
$(“div”).each(function(idx){
$(this).prepend(idx+”:”);
If(this.id==”last”)
return fasle;
})
但是，其用的并不多；
除了each() 方法，jQuery类库还提供了map() index() is()方法;
map() 方法与Array.prototype.map()方法类似，通过映射返回一个新的数组；
如：//找到所有的标题元素，通过映射找到他们的id，并转换为真实数组，然后排序
$(“:header”).map(function(){return this.id;}).toArray().sort();
index() 接收一个元素作为参数，返回值是此jQuery()对象中的索引值；找不到的话返回 -1
$(“body”).index(“p”);
is() 接收一个选择器作为参数，如果选中元素至少有一个匹配该选择器，返回true
$(“div”).each(function(){ //对于每个div元素
if($(this).is(“:hidden”)) //匹配到hidden元素，跳过
return;
});
2 jQuery 操作
一、获取、设置HTML属性，CSS样式，元素内容和位置宽高的值；
（1）获取、设置HTML属性
attr()
$(“form”).attr(“action”); //获取第一个form元素的action属性
$(“#icon”).attr(“src” , ”icon.gif”) ; //设置src 属性
$(“#banner”).attr({ //以下设置4个属性
src: ”banner.img”,
alt: “advertisement”,
width:720,
Height:80
});
$(“a”).attr(“target” , ”_blank”); // 使所有链接都在新窗口中打开
$(“a”).attr(“target”,function(){
If(this.host==location.host) //使站内链接在本窗口中打开
return “_self”;
else
return “_blank”; //非站内链接在新窗口中打开
});
$(“a”).attr({target: function(){}}); //使链接对象执行某个函数
$(“a”).removeAttr(“target”); //移除选中元素设置的属性
（2）获取设置CSS属性
css() 返回的是元素的当前样式，不能获取复合样式的值，如font，margin，而是单个样式的值
$(“h1”).css(“font-weight”); // 获取第一个
的字体宽度
$(“h1”).css(“fontWeight”); //驼峰命名方式也同样可以
$(“h1”).css(“font”); // 错误 --不可获取复合样式
$(“h1”).css(“border”,”solid black 2px”); //设置复合样式是ok的
$(“h1”).css(“font-variant” , “small-caps”); // 对所有的
元素设置该样式 变换字体 小型大写
$(“h1”).css({
backgroundColor: ”red”,
textColor : ”black”;
fontVariant : “small-caps”,
padding : “10px 2px 4px 20px”
});
$(“h1”).css(“font-size”,function(i,curval){ //所有
字体增加25%
return Math.round(1.25*parseInt(curval));
});
（3）获取设置css类
addClass() removeClass() toggleClass() hasClass()
//添加CSS类
$(“h1”).addClass(“t1”); // 给所有
元素添加一个类
$(“h1+p”).addClass(“p1 p2”); //给
后面的
添加2个类
$(“section”).addClass(function(){ //传递一个函数用来给匹配的每个元素添加自定义类
return “section”+n;
});
（4）获取设置HTML表单值
val()
$(“#surname”).val(); //获取surname文本域的值
$(“select#extras”).val(); //从中获取一组值
$(“input:radio[name=ship]:checked”).val() //获取选中的单选按钮的值
$(“email”).val(“Invalid email address”); // 给文本域设置值
$(“input:checkbox”).val([“opt1” , ”opt2” ]);
(5) 获取设置元素内容
text() html()
var title=$(“head title”).text() //获取文档标题
var headline=$(“h1”).html() // 获取第一个
元素的html
$(“h1”).text(function(n,current){
return “&”+(n+1)+ ” : ” +current
});
(6) 获取设置元素的位置宽高
offset() 获取元素位置
width() height() innerWidth() innerHeight() outerWidth() outerHeight()
scrollTop() scrollLeft()
(7) 获取设置元素数据
data() removeData()
二、修改文档结构：
（1） 插入和替换元素
append() appendTo()
prepend() prependTo()
after() insertAfter()
before() insertBefore()
replaceWith() replaceAll()
（2）复制元素
clone()
（3）包装元素
wrap()
wrapInner()
wrapAll()
（4）删除元素
empty()
remove()
filter()
detach()
unwrap()
三、使用jQuery处理事件
(1) 事件处理程序的简单注册
事件在前面已经讲过，jQuery处理的事件大部分也是之前的；
使用jQuery() 处理事件，要比之前的给选中某个元素，并添加addEventListenner() 或attachEvent() 要方便的多；
如：$(“p”).click(function(){ $(this).css(“background-color” , “ blue”)})
(2) 事件处理的高级注册
bind() 事件绑定
如： 之前 $(“p”).click(f);
绑定 $(“p”).bind(‘click’ , f) ;
(3) 注销事件
$(‘*’).unbind(); // 从所欲元素中移除所有jQuery事件处理程序
$(‘a’).unbind(“mouseover mouseout”) //从所有元素中取消绑定的所有mouseover mouseout 事件
(4) 触发事件
(5) 自定义事件
(6) 实时事件
需要使用 delegate() undelegate() 来取代bind() 和 unbind()
实时事件依赖事件冒泡；
还有一个live() die()
四、动画效果
fadeIn() fadeOut() //渐入渐出
fadeto() show() hide() toggle() slideDown() slideUp() slideToggle()\\\
animate() //自定义动画
jQuery选择器：
元素选择器
$(“p”) //选择
元素
$(“P.demo”) //选择所有 class=“demo”的
元素
$(“p#dd”) //选择id=”dd” 的第一个
元素
属性选择器：
$(“[href]”) //选择所有带有href属性的元素
$(“[href=”#”]”) //选择所有带有href值等于“#”的元素
$("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。
CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
其他：
$(this) //当前 HTML 元素
$("p") //所有
元素
$("p.intro") //所有 的
元素
$(".intro") //所有 的元素
$("#intro") //id="intro" 的第一个元素
$("ul li:first") //每个
的第一个
元素
$("[href$='.jpg']") //所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head") //id="intro" 的 元素中的所有 的元素
