jq学习笔记

jQuery: JavaScript Query(查询)

jQuery 是一个 JavaScript 库。

使用方式不一样
库：我们是拿过来用
框架：定制了一系列规范，我们必须先了解这些规范然后按照框架的规范编写程序

简化js的复杂操作
不再需要关心兼容
提供大量的实用方法

下载JQ 或 CDN(跨域引用)

http://www.cnblogs.com/2010master/p/5808644.html
http://www.jQuery123.com

入口函数详细介绍
第一种：$("document").ready(function());第二种：$(function () { } );
和js的入口函数window.onload的区别：
jQuery–文档树加载完成的时候执行，不会等待突破资源的加载完成
js–文档树加载完成后，必须等待图片等的资源加载完成才会执行

jQuery中的$符号本质就是一个函数，且$ === jQuery，可分为3种功能:
1，$(function());参数是function，功能是入口函数2，$("#id"); $(".wrap");等参数是字符串，一般都是选择器，功能是查找页面的元素3，$(domObj); 将dom对象转化成jQuery对象

jQuery对象和DOM对象
jQuery对象：用jQuery方法获取到的元素返回的对象
DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象
两者的区别：jQuery对象就是DOM对象的包装集（伪数组）
两者之间的转换：
jQuery对象转DOM对象：通过索引-- jQueryObj[index] 或 jQueryObj.get(index)
DOM对象转jQuery对象：$(domObj)

---

jq常用方法：

---

http://www.cnblogs.com/suoning/p/5683047.html#autoid-0-8-0

$(“999”) 创建span元素----------------------------------------------------------

click()

Html()
text()
css()
offset().left/top 获取偏移量
position().left 获取定位left
attr() 属性设置
addClass() 添加类
toggleClass() 添加/删除类
removeClass() 删除类
odd 奇数对象
even 偶数对象
get(0)第一个子对象 会转化为js对象
eq(0) 第一个子对象
index() 同级比较 返回索引值（第几个）
add() 增加个对象进行操作
slice(开始对象的下标，结束对象的下标) 不包括结束对象
end()返回上一个对象 $(“p”).find(“span”).css(“color”, “red”).end().css(“border”, “2px red solid”);
has(x) 拥有X子代的

not() 除此之外的对象
filter() 过滤
siblings()

find() 子对象
next() 同级下一个对象
prev()同级上一个对象
nextUntil()
prevUntil()
nextAll()
prevAll()

parent() 找父级
offsetParent() 返回最近的祖先定位元素。
parents() 所有父级及祖先
closest(“div”)–获取当前对象的第一个祖先div 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
parentsUntil()

val() 表单内容

serialize() serializeArray()
console.log($(‘form’).serialize()); //string : a=1&b=2&c=3
console.log( $(‘form’).serializeArray() );
/* [
{ name : ‘a’ , value : ‘1’ },
{ name : ‘b’ , value : ‘2’ },
{ name : ‘c’ , value : ‘3’ }
] */

width() 获取css宽度 width
innerWidth() width+padding
outerWidth() width+padding+border
outerWidth(true) width+padding+border+margin

$("A").insertBefore($(“B”)) 把A元素插入到B元素之前
$("A").before($(“B”)) A元素之前插入B元素 后续操作不同
$("A").insertAfter($(“B”)) 把A元素插入到B元素之后
$("A").after($(“B”)) A元素之后插入B元素

prependTo() 把A元素插入到B元素内容之前
prepend() A元素内容之前插入B元素
appendTo() 把A元素插入到B元素内容之后
append() A元素内容之后插入B元素

empty() 删除节点内的内容
remove() 移除节点 一个 默认第一个 不保留事件，剪切
removeAll() 移除所有该类节点
detach() 保留事件，剪切 http://www.w3school.com.cn/tiy/t.asp?f=jquery_manipulation_detach_move
clone() 浅拷贝，不保留事件
clone(true) 深拷贝，保留事件

$("A").wrap($(“B”)) 每个A元素包裹于一个B元素内
$("A").wrapAll($(“B”)) 所有A元素包裹于一个B元素内 (强制)
$("A").wrapInner($(“B”)) A元素的内容包裹于B元素内
$(“A”).unwrap() 取消包裹（删除父级）

------------------------------------------_-
$(“A”).on(“click mouseover”,function(){
alert(1);
})
/
$(“A”).on({
“click”:function(){alert(1);},
“mouseover”:function(){alert(2);}
})

$(“p”).bind(“click”, function(){
alert( $(this).text() );
});
$(menuF).bind({
“mouseover”:function () {
$(menuS).parent().removeClass(“hide”);
},
“mouseout”:function () {
$(menuS).parent().addClass(“hide”);
}
});
on()
bind()
off() 移除事件绑定
unbind()
$(“A”)trigger(“aa”); 自定义事件名aa++++++++++++++++++++++++++

事件委托
delegate() undelegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$(‘ul’).delegate(‘li’,‘click’,function(){
this.style.background = ‘red’;
$(‘ul’).undelegate();
});

one()++++++++++
$(“A”).one(“click”,function(){
alert(1);
}); 只执行一次

each();++++++++++
$(“li”).each(function(i,item){
$(item).css(“background”,“red”);
})

scrollTop() 滚动条至顶部的距离

$(“tr:eq(1)”) //给定索引值的元素
$(“tr:gt(0)”) //大于给定索引值的元素
$(“tr:lt(2)”) //小于给定索引值的元素

$(“div”).siblings() //所有的同辈元素,不包括自己

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
事件绑定

DOM2级事件绑定

addEventListener(“事件名”，事件处理程序，事件流（flase默认）) 添加事件绑定 attachEvent()

removeEventListener() 移除事件绑定 detachEvent()

jq临时事件对象

pageX —> clientX
pageY —> clientY 距可视窗口的垂直方向距离
which —> keycode 键值
stopPropation()

data
target
type
$(function(){
$(’#div1’).on(‘click’,{name:‘hello’},function(ev){
console.log(ev.data.name);//hello
console.log( ev.target );//

0
console.log( ev.type );//click
});
});

preventDefault 阻止默认事件 取消跳转
delegate() undelegate()
$(‘ul’).delegate(‘li’,‘click’,function(){
this.style.background = ‘red’;
$(‘ul’).undelegate();
});
效果

hover(function(){划入效果},function(){划出效果});

基本
$(“p”).show() 　　 //显示隐藏的匹配元素
$(“p”).show(“slow”); //参数表示速度,(“slow”,“normal”,“fast”),也可为900毫秒
$(“p”).hide() 　　　 //隐藏显示的元素
$(“p”).toggle(); 　　//切换 显示/隐藏
滑动
$(“p”).slideDown(“900”); //用900毫秒时间将段落滑下
$(“p”).slideUp(“900”); 　//用900毫秒时间将段落滑上
$(“p”).slideToggle(“900”); //用900毫秒时间将段落滑上，滑下
淡入淡出
$(“p”).fadeIn(“900”);　　 //用900毫秒时间将段落淡入
$(“p”).fadeOut(“900”); 　　 //用900毫秒时间将段落淡出
$(“p”).fadeToggle(“900”); 　//用900毫秒时间将段落淡入,淡出
$(“p”).fadeTo(“slow”, 0.6); //用900毫秒时间将段落的透明度调整到0.6

animate() :
//第一个参数 : {} 运动的值和属性 background不支持
//第二个参数 : 时间(运动快慢的) 默认 : 400
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
//第四个参数 : 回调函数
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').stop(); …(’#div1’).stop(true); //阻止后续的运动
//KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').stop(tru…(’#div1’).finish(); //立即停止到所有指定的目标点

animation: name duration timing-function delay iteration-count direction fill-mode;

$.方法++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

$ .noConflict() : 防止$冲突的
var web = $.noConflict();
var $ = 10;
web(function(){ 
    web('body').css('background','red');
});

type()  判断类型
noConflict() 防止$冲突的
trim()  去除字符串两边空格
inArray(字符串,arr,起始位置)相当于数组的indexOf()   
makeArray()将类数组转换为数组
parseJSON()  和原生的JSON.parse()一样 json字符串-->json
proxy(原,指向) 改变this指向的
proxy(原,指向)(); 改指向并调用

$.ajax++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

$.get(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])
$.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])
    url
        类型: String
        一个包含发送请求的URL字符串
    data
        类型: PlainObject, String
        发送给服务器的字符串或Key/value键值对。
    success(data, textStatus, jqXHR)
        类型: Function()
        当请求成功后执行的回调函数。
    dataType
        类型: String
        从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。
$.getJSON()  获取json数据
$.getScript() 获取js文件并执行

$().load();请求html文件 异步
.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
    url
        类型: String
        一个包含发送请求的URL字符串
    data
        类型: PlainObject, String
        向服务器发送请求的Key/value参数，例如{name:"",age:23}
    complete(responseText, textStatus, XMLHttpRequest)
        类型: Function()
        当请求成功后执行的回调函数。

    <iframe scr="http://www.baidu.com" frameborder="1"></iframe>
$.ajax({
    type:"get(默认)",
    url:"",
    data:{},
    dataType:"json",
    seccess:function(data,textStatus,jqXHR){

    },
    error:function(xhr,error,errorThrown){

    },
    assync:true/false,
    global:true/false,//打开/禁止触发全局ajax事件
})
$.ajaxSetup() 预设ajax(设置多个ajax需要用的需要用相同参数)  设置任何默认参数

创建jQuery插件
https://www.cnblogs.com/yuqingfamily/p/5813270.html

var newObject=$.extend({},{},{}…)       创建插件   /   合并多个对象