一, JQuery的用法
1. 首先要下载Jquery的js文件,并在需要使用JQuery的html文件的<head>标签加载该js文件 :
<script type="text/javascript" src="js/jquery.js"></script>
并在下一行输入JQuery代码 : <script>JQuery代码 </script>
2. JQuery代码都要从如下代码开始 :
完整写法 : $(document).ready(function(){ JQuery代码 })
简略写法 : $(function(){ JQuery代码 })
3. JQuery代码中 "$" 符号的四种应用
(1) $(function(){}) : JQuery代码的开始
(2) $(selector) : 在html中查找标签和属性(JQuery选择器)
(3) $(dom element) : 将javascript中通过documentElementById()方法得到的DOM对象转换成JQuery对象,
这样才能继续使用JQuery的各种方法
(4) $(html) : 将html转换成JQuery对象. 例: $("<p>i love you</p>")
4. JQuery中最重要的用法 , $(selector).action() : 给查找到的html元素添加事件 .
(1) 其中的 selector 选择器包括以下四大类内容 :
①基本选择器 :
a. 标签选择器("div"): 选择所有的div标签
b. id选择器("#123"): 选择属性中 id的值等于123的标签
c. class选择器(".123"): 选择属性中 class的值等于123的标签
d. 并集选择器("p,div"): 选择所有的p标签和div标签
e. 交集选择器("div.123") : 选择标签的class属性等于123的div标签,
f. 全局选择器("*"), 选择所有的标签
②层次选择器 :
a. 后代选择器("ul li"): 选择ul下的所有li (包括指定标签下的所有标签,包括儿子和孙子等等)
b. 子选择器("ul>li"): 选择ul标签的儿子标签li(只包括指定标签的儿子层,不包括孙子等)
c. 相邻选择器("ul+p"): 选择ul标签其后的相邻的同辈p标签(必须是其后并紧挨相邻的同辈标签)
d. 同辈选择器("ul~p"): 选择ul标签其后的所有同辈p标签(ul后面的所有同辈的p标签)
③属性选择器 ([ ]) :
a. 选取含有该属性的标签("div[id]"): 选取包含id属性的div标签
b. 选取属性值等于给定值的标签("div[id='123']"): 选取属性值等于123的div标签
c. 选取属性值不等于给定值的标签("div[id!='123']"): 选取属性值不等于123的div标签
d. 选取属性值以给定值开头的标签("div[id^='123']"): 选取属性值以123开头的div标签
e. 选取属性值以给定值结尾的标签("div[id$='123']"): 选取属性值以123结尾的div标签
f. 选取属性值包含给定值的标签("div[id*='123']"):选取属性值包含123的div标签
g. 选取多个属性都符合给定值的标签("div[id][class='123']"): 选取包含id属性并且class属性等于123的div标签
④过滤选择器 ( : ) :
a. 选取选择的第一个标签("ul li:first"): 选取ul下的第一个li标签
b. 选取选择的最后一个标签("ul li:last"): 选取ul下的最后一个li标签
c. 选取选择的奇数标签("ul li:odd"): 选取ul下的所有奇数li标签(标签从零开始,所以第一个标签是偶数)
d. 选取选择的奇数标签("ul li:even"): 选取ul下的所有偶数li标签(标签从零开始,所以第一个标签是偶数)
e: 反选标签("p:not(.a)"): 选取class属性为a的p标签以外的其余p标签
f: 标题标签(":header"): 选取所有的h1--h6的标题标签
g: 选取获得焦点的标签("input:focus"): 选取获得焦点的所有input标签
h: 选取索引等于给定值的标签("ul li:eq(0)"): 选取ul标签下的索引为0的li标签,即第一个li标签
i: 选取索引大于给定值的标签("ul li:gt(1)"): 选取ul标签下的索引大于1的li标签, 即从第三个以后的li标签
j: 选取索引小于给定值的标签("ul li:lt(2)"): 选取ul标签下的索引小于1的li标签, 即前两个li标签
k: 选取所有的隐藏标签(":hidden"): 选取所有的隐藏的标签 (即type="hidden")
l: 选取所有的可见的元素(":visible"): 选取所有可见的元素 (即没有type="hidden")
(2)action中包含的内容
①. 鼠标事件
a. click(): 鼠标的点击事件
b. mouseover(): 鼠标的滑过事件
c. mouseout(): 鼠标的离开事件
d. hover(): mouseover和mouseout的复合事件, 这时会有两个function(){}参数
②.键盘事件
a. keypress(): 会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
b. keydown(): 键盘按下时触发. (keyCode==13时代表按下 Enter 键)
例: $(document).keydown(function(event){
//判断当event.keyCode 为37时（即左方面键），执行函数to_left();
//判断当event.keyCode 为39时（即右方面键），执行函数to_right();
if(event.keyCode == 37){
to_left();
}else if (event.keyCode == 39){
to_right();
}
});
c. keyup(): 键盘释放时触发
③.动画事件
a. show(), hide() : 参数是响应事件, 毫秒为单位
b. toogle(): 复合事件, show和hide的复合事件
b. fadein(), fadeout(): 参数是响应事件, 毫秒为单位
c. slidedown(), slideup(): 参数是响应事件, 毫秒为单位
④. DOM操作
a. val(), val("") : 不带参数表示获取标签的value属性值, 带参数表示设置该值
b. text(), text("") : 设置或获取被选元素的文本内容(innerText)
c. html(), html("") : 返回或设置被选元素的内容(innerHTML)
d. css(""), css("", "") : 返回或者设置元素的样式
e. addClass(""), removeClass(""), toogleClass("") : 添加样式; 移除样式; 复合操作(添加或移除)
f. append(), appendTo(), prepend(), prependTo() : 在被选元素的结尾(仍然在内部)插入指定内容(append,appendTo); 在被选元素的开头(仍然在内部)插入指定内容(prepend, prependTo); 带To和不带To的区别: 如果是A append B 和 A appendTo B, 前者是B插入A内部的尾部, 后者是A插入B内部的尾部.
g. after(), insertafter(), before(), insertbefore() : A insertafter B 表示将A插入到B(selector)之后; A after B 表示将B插入A(selector)之后
h. replaceWith(), replaceAll() : A(selector) replaceWith B, B替换A; A replaceAll B(selector), A替换B
i. clone() : 生成被选元素的副本, 包括子节点, 文本和属性. 参数为boolean, 意思是是否复制事件
j. attr(""), attr("", "") : 获取或者设置属性的值.
k. empty() : 将指定元素中的所有内容全部清除,包括文本和子元素
l. remove(), detach() : 都是删除指定元素, 删除之后开可以还原. 还原的内容不同: remove()只能还原元素本身,不能还原JQuery数据,事件和附加的数据等; detach()不但可以还原标签,还可以还原事件和附加的数据等
m. childern() : 只能查找儿子元素
n. find() : 能查找所有的后代元素
o. next(), nextAll(), nextUtil(4) : 同辈元素的查找, 下一个, 后面的所有, 后面直到第4个.
p. prev(), prevAll(), prevUtil(4) : 同辈元素的查找, 上一个, 前面的所有, 前面直到第4个.
q. parent() : 只能查找父亲节点
r. parents() : 查找所有的前辈节点
5.使用JQuery完成异步请求 :
(1) 书写形式 : $.ajax({ 参数 })
(2) 详细描述 : $.ajax({ 参数 })是JQuery提供的一个函数,这个函数实现了对ajax的请求,并且帮助开发者完成了具体细节的工作, 比如浏览器的兼容性, post请求头部的设置等. 开发者只需要把所有的参数组装成一个对象当做这个函数的一个参数传入即可.
(3) 参数 :
a. type : get 或者 post
b. url : 请求链接地址
c. async : 是否异步
d. success(function(data){}) : 请求成功后服务器给客户端传递的数据, 通过data变量传递.
e. error : 出错后的处理方式
f. data : post请求的时候才有, 是浏览器给服务器传递的参数
g. beforesend : 发出请求之前执行的内容
h. complete : 完成请求之后执行的内容
(4)注意 : 若发生ajax请求的资源和url指向的网络资源不再同一个服务器中, 直接访问, 请求能够到达,但是服务器的安全机制造成会在客户端报错,无法正常获取数据, 我们需要的服务器端设置两个响应头:
response.setHeader("Access-Control-Allow-Origin", "*"); 表示其他域下的ajax请求都能访问本服务器
response.setHeader("Access-Control-Allow-Methods", "POST, GET"); 允许的请求方式