JQuery笔记

• jQuery官网

• jQuery Plugins

• W3C JQuery

• jQuery插件库

1.入口函数

// 原生JS入口函数
window.onload = function(){
}
//jquery入口函数
$(document).ready(function(){
});
$(function(){
});

Dom对象和jq对象不同，Jq对象相当于一个数组，里面包含了Dom对象
$(Dom对象)  Dom对象转换为jq对象
$li.get(0)或$li[0] 将jq对象转换为Dom对象

原生JS和jQuery入口函数的加载模式不同：

• 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行；jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
• 原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的；jQuery中编写多个入口函数,后面的不会覆盖前面的。

jQuery入口函数的多种写法：

• $(document).ready(function(){})
• jQuery(document).ready(function(){})
• $(function(){}) 推荐写法
• jQuery(function(){})

jQuery冲突问题：

• 释放$的使用权 jQuery.noConflict();
• 自定义访问符号 var nj = jQuery.noConflict();nj(function(){});

核心函数：

$();就代表调用jQuery的核心函数

• 接收一个函数

• 接收一个字符串
  接收一个字符串选择器$(".box")
  接收一个代码片段 $("

  我是段落

  ")

• 接收一个DOM元素 var span = document.getElementByTagName("span");$("span");包装成一个JQuery对象返回

jQuery对象

jQuery对象是一个伪数组

静态方法和实例方法

//1.定义一个类
function AClass(){
}
//2.给这个类添加一个静态方法，直接添加给类的就是静态方法
AClass.staticMethod = function(){}
//静态方法通过类名调用
AClass.staticMethod();
//3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){}
//实例方法通过类的实例调用
// 创建一个实例（创建一个对象），调用实例方法
var a = new AClass();
a.instanceMethod();

• each方法

var arr=[1,2,3,4];
$.each(arr, function(index,value){});
jQuery的each方法可以遍历数组和伪数组

• map方法

第一个参数：要遍历的数组
第二个参数：没遍历一个元素之后执行的回调函数
回调函数参数：
第一个参数：遍历到的元素
第二个参数：遍历的索引
$.map(arr, function(value, index){} );

• jQuery中的each静态方法和map静态方法的区别：

each静态方法默认的返回值就是，遍历谁就返回谁，map静态方法默认的返回值是一个空数组。
each方法不支持在回调函数中对遍历的数组进行处理，map方法可以自回调函数中通过return对遍历的数组 $.map(arr, function(value, index){ return value + index;} );

• trim方法

去除字符串两端的空格
返回值：去除空格之后的字符串
var res = $.trim(str);

• $.isWindow()

判断传入的对象是否为window对象

• $.isArray()

判断传入的对象是否为真数组

• $.isFunction()

判断传入的对象是否为函数
jQuery框架本质上是一个函数$.isFunction(jQuery);

• $.holdReady(true)

暂停ready的执行，恢复时$.holdReady(false);

通过webstorm简化操作

• 模板操作 在Settings->Live Templates 右边选中html/xml 添加模板
• Settings->Keymap 右边搜索default ，选中other/Open in default browser右键Add Keyboard Shortcut添加快捷键 Alt + R.

2.选择器

2.1 基本选择器

$("#four")  ID选择器
$(".green") 类选择器
$("li") 标签选择器
$("#four,.green") 并集选择器
$("li.green") 交集选择器

2.2 层级选择器

$("#father>p") 子代选择器
$("#father p") 后代选择器

2.3 过滤选择器

$("li:first").css("backgroundColor","red");
:first :last
:eq(index)
:gt(index) :lt(index)
:odd :even

2.4 筛选选择器(方法)

children("ul")
parent()
next() prev()
siblings()
find("li")
eq(index)

2.5 内容选择器

• :empty
  找到即没有文本内容也没有子元素的指定元素
  $("div:empty");
• :parent
  找到有文本内容或有子元素的指定元素
  $("div:parent");
• :contains(text)
  找到包含指定内容文本的指定元素
  $("div:contains('我是div')")
• :has(selector)
  找到包含指定子元素的指定元素
  $("div:has('span')");

3.属性操作

属性

属性和属性节点

• 1.什么是属性?
  对象身上保存的变量就是属性
• 2.如何操作属性？
  对象.属性名称 = 值；
  对象.属性名称；
  对象["属性名称"] = 值；
  对象["属性名称"]；
• 3.什么是属性节点？
  
  在编写HTML代码时，在HTML标签中添加的属性就是属性节点
  在浏览器中找到span这个DOM元素之后，展开看到的都是属性
  在attributes属性中保存的所有内容都是属性节点
• 4.如何操作属性节点？
  DOM元素.setAttribute("属性名称","值");
  DOM元素.getAttribute("属性名称");
• 5.属性和属性节点有什么区别？
  任何对象都有属性，但是只有DOM对象才有属性节点

attr方法

• attr(name|pro|key,val|fn)
  获取或者设置属性节点的值
  传递一个参数代表获取属性节点的值 ·$("span").attr("class");
  无论找到多少个值，都只会返回第一个元素指定的属性节点的值
  传递两个参数代表设置属性节点的值 $("span").attr("class","box");
  如果是设置找到多少个元素就会设置多少个元素，如果设置的属性不存在，系统会自动新增
• removeAttr(name)
  删除属性节点，会删除所有找到元素指定的属性节点

prop方法

• prop()
  特点和attr方法一致
• removeProp()
  特点和attr方法一致
• 官方推荐在操作属性节点时，具有true和false两个属性节点，如checked，selected或者disabled 使用prop(),其他的使用attr() ,列：$("input").prop("checked");

CSS类

• addClass(class|fn)
  添加一个类
  如果要添加多个，多个类名之间用空格隔开
  $("div").addClass("class1");
• removeClass(class|fn)
  删除一个类
  如果要删除多个，多个类名之间用空格隔开
• toggleClass(class|fn)
  切换类
  有就删除，没有就添加

HTML代码/文本/值

• html([val|fn])
  和JS中的innnerHTML一模一样
• text([val|fn])
  和JS中的innerText一模一样
• val([val|fn|arr])

4.CSS

CSS

• 逐个设置
  $("div").css("width","500px");
• 链式设置
  $("div").css("width","500px").css("height","500px");
• 批量设置
  $("div").css({width: "100px", height: "500px"});
• 获取CSS样式值
  $("div").css("width")

位置和尺寸

• width([val|fn])
• offset([coordinates])
  获取元素距离窗口的偏移量
  $(".son").offset().left;
$(".son").offset({left: 10});
• position()
  获取元素距离定位元素的偏移量
• scrollTop
  $(".scroll").scrollTop(300);
  为了保证浏览器的兼容，获取网页滚动的偏移位需要按照如下：$("body").scrollTop() + $("html").scrollTop();
  设置网页滚动$("body,html").scrollTop(300);

5.事件

事件绑定

jQuery中有两种绑定事件方式
1.eventName(fn)
编码效率略高，部分事件jQuery没有实现，所以不能添加
2.on(eventName,fn)
编码效率略低，所有js事件都可以添加
可以添加多个相同或者不同类型的事件，不会覆盖

事件移除

$(''button").off()
off不传参数会移除所有的事件
$("button").off("click")
off方法如果传递一个参数，会移除所有指定类型的事件

jQuery事件冒泡和默认行为

• 什么是事件冒泡
  如果给父亲和儿子都添加了点击事件，儿子在响应事件的时候，父亲也会响应事件
• 如何阻止事件冒泡

$(".son").click(function(){
  return false;
});
//或者
$(".son").click(function(event){
  event.stopPropagation();
});

• 什么是默认行为
  点击a标签，会跳转，表单提交跳转
• 阻止默认行为

$("a").click(function(){
  return false;
});
//或者
$("a").click(function(event){
  event.stopPropagation();
});

自动触发事件

$(".father").trigger("click");
用trigger自动触发事件，会触发事件冒泡，会触发默认行为
$(".son").triggerHandler("click");
用triggerHandler自动触发事件，不会触发事件冒泡，不会触发默认行为

自定义事件

想要自定义事件，必须满足两个条件
事件必须通过on绑定的，事件必须通过trigger来触发
$(".son").on("myClick",function(){ });
$(".son").trigger("myClick");

jQuery事件命名空间

事件是通过on来绑定的，通过trigger触发事件
$(".son").on("click.zs",function(){});
$(".son").on("click.ls",function(){});
$(".son").trigger("click.zs");
利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

事件委托

在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有的找到的元素添加事件，$("ul>li").click(function() {});
$("ul").delegate("li","click",fn);

jQuery移入移除事件

mouseover/mouseout子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave子元素的移入移出不会触发父元素的事件（推荐）
hover(fn,fn);可以同时监听移入移出

6.效果

• jQuery显示隐藏动画
  hide(1000,fn); show(1000,fn); togger(1000)
• jQuery展开和收起动画
  slideDown(1000,fn) slideUp(1000,fn) slideToggle(1000,fn)
• jQuery淡入淡出动画
  fadeIn(1000,fn)
fadeOut(1000,fn)
fadeToggle(1000,fn) fadeTo(1000, 0.5, fn)
• jQuery自定义动画
  第一个参数接收一个对象，可以在对象中修改属性
  第二个参数指定动画时长
  第三个参数指定动画的节奏,默认就是swing
  第四个参数动画执行完毕之后的回调函数
  animate({marginLeft:500}，1000，fn)
animate({width:"+=100"},1000,fn)
animate({width:"toggle"},1000,fn);
  在jQuery的{}中可以同时指定修改多个属性，多个属性的动画也会同时执行
  animate({width:500,height:500},1000)

5.节点操作

• jQuery添加节点相关的方法
  1.创建一个节点
  var $li = $("
• 新增的li
");
2.添加节点
$("ul").append($li);
$("ul").prepend($li);
$li.appendTo("ul");
$li.prependTo("ul");
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后
prepend(content|fn)
prependTo(content)
会将元素添加到指定元素的最前面
$("ul").after($li);
$("ul").before($li);
$li.insertAfter("ul");
外部插入
after(content|fn);
insertAfter(content)
会将元素添加到指定元素外部的后面
before(content|fn);
insertBefore(content);
会将元素添加到指定元素外部的前面
• JQuery删除节点相关方法
  remove() 删除指定元素
  empty() 删除指定元素的内容和子元素，指定元素自身不会被删除
• jQuery替换节点相关方法
  replaceWith(content|fn) 替换所有匹配的元素为指定的元素
  replaceAll(selector)
• jQuery复制节点相关方法
  clone()
  如果传入false就是浅复制，如果出入true就是深复制
  浅复制只会复制元素，不会复制元素的事件
  深复制会复制元素，而且还会复制元素的事件

特殊属性操作

val()方法
html()和text()方法
width()和height()方法
获取页面可视区的宽高：$(window).width() 和 $(window).height()
width()//width
innnerWidth()//padding+width
outerWidth()//padding+width+border
outerWidth(true)//padding+width+border+margin
scrollTop()和scrollLeft()

$("html,body").animate({scrollTop:0},3000);

offset()和position()

offset();//获取元素的相对于document的位置
position();//获取元素相对于有定位的父元素的位置