jq笔记

一、jquery对象和DOM对象互换

1.jquery对象转DOM对象

方法一：

//通过jquery对象下标取得DOM对象
$().[index]
//如
$("p").[0]

方法二：

//通过get方法，取得对象下标获取DOM对象
$().get(index)  
//如
$("p").get(0)

2.DOM对象转jquery对象

//DOM对象写在jquery$()里面就可以了
$(DOM对象)
//获取DOM对象
var dom_obj=document.getElementByID("p");
//转换为JQ对象
$("dom_obj")

二、解决jquer库和其他库的冲突

1.jquery库在其他库之后引入

使用jquery中的jQuery.noConflict()函数，运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

可以给jquery起别名/快捷方式

//jquery修改别名伪jq
var $jq(别名) = jQuery.noConflict();
//使用还是一样
jquery("p") -> $jq("p")

继续使用$，不管其他库是否能使用$ [但$只在jquery内部使用]

①比较理想的写法

jQuery.noConflict();//转让$使用权
 (function($) { 
   $(function() {
     // 使用 $ 作为 jQuery 别名的代码
   });
 })(jQuery);
 // 其他用 $ 作为别名的库的代码

②

jQuery.noConflict();
jQuery(function($) { 
     // 使用 $ 作为 jQuery 别名的代码
 });
 // 其他用 $ 作为别名的库的代码

③API文档提供的一种新方法

//完全将 jQuery 移到一个新的命名空间
var dom = {};
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
 dom.query("div p").hide();
 // 另一个库 $() 的代码
 $("content").style.display = 'none';
 // 另一个版本 jQuery 的代码
 jQuery("div > p").hide();

2.jquery库在其他库之前引入

如果jquery在其他库之前导入，不需要使用jQuery.noConflict();函数提交使用权

但jquery的调用方式为

//不需要调用jQuery.noConflict();
jQuery(function($) { 
     // 使用 $ 作为 jQuery 别名的代码
jQuery("p").click(function(){
    // do something...    
}    
);
 });
 // 其他用 $ 作为别名的库的代码

三、jQuery选择器

1.基本选择器

2.层次选择器

3.过滤选择

①基本过滤

②内容过滤

③可见性过滤

注意：：hidden选择器，不仅包括display：none ，还包括隐藏域、visibility：hidden

④属性过滤器

⑤子元素过滤选择器

⑥表单对象属性过滤选择器

4.表单选择器

5.选择器注意事项

①选择器中包含有 "." , "#" , ")" ,"]" 这些特殊符号

使用转义来表示,什么是转移字符？点击查看http://baike.baidu.com/view/73.htm

如HTML代码

<div id="id#demo"></div>
<div id="id[1]"></div>

jquery正确写法

$('#id\\#demo');  //转义#
$('#id\\[1\\]');      //转义 []

②选择器含空格与不含空格

含空格，一般是指后代选择器了，二部含空格则是跟前面的选择器联合一起为同一个元素的多条件过滤

6.判断获取元素是否存在

//根据获取元素的长度来判断
if($("p").length > 0)/{
    //do something...
}
//或转成DOM对象判断
if($("p").[0])/{
     //do something...
}

//不能使用以下方式判断，因为是一个错误的判断方式
if($("p")){
    //do something....
}

四、DOM 操作

1.插入内部节点

①append 主动

 HTML 代码:
  <p>I would like to say: </p>
 jQuery 代码:
  $("p").append("<b>Hello</b>");
 结果:
[ <p>I would like to say: <b>Hello</b></p> ]

②appendTo 被动

③prepend

④prependTo

2.插入外部节点

①after

②insertAfter

③before

④insertBefore

3.节点包裹

①wrap

②unwrap

③wrapall

④wrapInner

4.节点替换

①replaceWith

②replaceAll

5.复制节点

①clone

6.节点删除

①remove

②empty

③detach

属性、类操作

获取HTML、文本和值

①html()

返回XHTML代码

②text()

返回文本值

③val()

返回value属性的值，如果是多个，则返回数组

遍历节点

1.children()

获取元素的子元素（非后代元素）

2.next()

获取元素的下一位元素（同辈、兄弟节点元素）

3.prev()

获取元素的上一位元素（同辈、兄弟节点元素）

4.siblings()

获取所用同辈元素、兄弟节点元素

5.closest()

取得最近的元素，如果没有找到，返回父元素继续查找，直到body，没有找到，返回空的jquery对象

6.还有N多个，find/nextAll/

待续。。。。。。

CSS-DOM 操作

1.css()

2.heigth()/width()

3.offset()

获取元素当前视窗的相对偏移，返回top、left

4.position()

获取匹配元素相对父元素的偏移。

5.scrollTop()和scrollLeft()

获取匹配元素相对滚动条顶端/左侧的偏移。

AJax

一、jQuery.ajax(options)

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
Options:

async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax Event.

cache (Boolean) : (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 Ajax 事件。

contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType (String) : 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。Ajax 事件。

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。

timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url (String) : (默认: 当前页地址) 发送请求的地址。