JQuery笔记(下) jquery1

8、效果

8.1基本

show()：显示show(speed,[callback])：以动画效果显示

hide()：隐藏hide(speed,[callback])：以动画效果隐藏

toggle()：显示或隐藏（切换）
toggle(switch)：显示或隐藏，要求的参数true或false
toggle(speed,[callback])：以动画效果显示或隐藏

以上函数speed参数支持一下值：
"slow"：缓慢
"normal"：正常
fast"：快速

8.2、滑动

slideDown(speed,[callback])：向下滑动（显示）
slideUp(speed,[callback])：向上滑动（隐藏）
slideToggle(speed,[callback])：滑动切换

8.3、淡入淡出

fadeIn(speed,[callback])：淡入（显示）
fadeOut(speed,[callback])：淡出（隐藏）
fadeTo(speed,opacity,[callback])：淡入淡出到指定值

9、文档处理

9.1插入

内部插入：<div>abcjQuerydef</div>

append(content)：在元素的内部最后插入数据
appendTo(content)：将匹配到的元素插入到指定内容的后面
prepend(content)：在元素内部前面插入数据
prependTo(content)：将匹配到的元素插入到指定内容的前面

外部插入：abc<div>jQuery</div>def

after(content)：在元素的后面插入数据
before(content)：在元素的前面插入数据
insertAfter(content)：将匹配元素插入到指定内容的后面
insertBefore(content)：将匹配元素插入到指定内容的前面

9.2删除

empty()：清空元素内容，但元素本身保留
remove()：删除元素，将元素本身删除

9.3复制

clone()：复制匹配的元素
clone()：复制匹配的元素，同时也复制它的事件机制

9.4替换

replaceWith()：将匹配到的元素替换成指定的内容

9.5包裹

<div>jQuery</div>

wrap()：对匹配的元素使用指定的内容进行包裹
wrapAll()：对匹配的的元素使用指定的内容进行包裹（仅包裹一次）
wrapInner()：对匹配元素的内容进行包裹

9.6查找

eq(index)：匹配指定索引的元素
$('div').eq(3) 匹配索引为3的div
filter(expr)：匹配过滤的元素
$('div').filter('.cls1') 匹配使用cls1的所有div
not(expr)：匹配除了指定元素之外的所有元素
$('div').not('.cls1') 匹配除了使用cls1的所有的div
children([expr])：匹配所有子元素
$(‘product’).children(‘name’).text();

10、插件机制

10.1插件机制语法

如：我们在使用jQuery时，有时常用的方法jQuery并没有封装，我们还需要反复使用这样的方法，如何解决这个问题？

语法:

通过jQuery.fn.extend方法对jQuery功能进行扩展，这个方法要求参数是一个json对象

对象的属性名是扩展方法名，属性值就是函数体。

11、each语句

each(callback)：循环执行callback

• each方法的功能：

• each方法用于遍历jQuery对象

• jQuery对象有几个元素，那么each方法中指定的函数就会自动执行多少次

• 每次遍历时，将当前元素的下标放在参数i中

• 每次遍历时，将当前元素本身放在参数item中

12、JQuery中的Ajax应用

12.1Ajax原生代码

var xhr=new XMLHttpRequest();
xhr.open(‘post’,’demo.php’);
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
xhr.onreadystatechange=function()
{ 
 if(xhr.readystate==4 && xhr.status==200)
 { //处理语句

12.2JQuery中的Ajax

JQuery中实现Ajax功能的方法主要用一下:

JQuery.ajax(option)
JQuery.get(url,[data],[callback])
JQuery.post(url,[data],[callback])

（1）jQuery中底层的ajax实现

• async ：是否异步 true：异步（默认） false：同步

• cache ：是否缓存

• complete ：当ajax对象的状态码为4时执行的函数

• contentType ：请求头

• data ：传递的参数，要求是一个字符串

• dataType ：期望得到的数据类型

• success ：ajax对象状态码为4并且http响应状态码为200时所执行的函数

• type ：请求类型 get post

• url ：请求地址

jQuery中高级的ajax实现

jQuery.get(url,[data],[callback],[type])

12.3解析xml数据

<users>
<user>
<username>wangcai</username><password>222222</password>
</user>
<user>
<username>xiaoqiang</username><password>111111</password>
</user>
</users>

var person=$(msg).find(“person”);
person.children(“name”).text();
person.children(“jian”).text();
person.children(“cheng”).text();

12.4解析json数据

var count=msg.length;
for(var i=0;i<count;i++){

13、跨域请求

13.1什么是跨域请求

跨域请求如突图

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。

13.2解决跨域请求问题

（1）使用script标签向另一个域上的资源进行请求，传递参数fn，保存将来要执行的js函数名。

（2）JSONP是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。

13.3jQuery解决跨域问题

$.ajax get 
$.get gets
$.getJSON get