jquery基本

1.jQuery是一个快速、小型且功能丰富的JavaScript库

2.选择器；

基本选择器：id 类 元素

过滤选择器: 都是按照索引来获取元素：索引是从0-n开始计数

:first //匹配第一个元素 （原生js中需要:first-child来筛选）

:last//匹配最后一个元素（原生js中需要:last-child来筛选）

:even//匹配索引是偶数的元素 注意:是按照索引取偶数元素

:odd//匹配索引是奇数的元素 注意:是按照索引取奇数元素

:eq(index)//取索引为index的元素---这个重中之重

:gt(index)//取索引大于index的所有元素

:lt(index)//取索引小于index的所有元素

.contains(text)//匹配内容为text的元素

child系列子选择器都是按照队列来获取元素：队列是从1-n计数

:first-child---获取队列第一个元素

:last-child---获取队列最后一个元素

:nth-child(n)---队列获取第n个元素

of-type系列子选择器：用于杂队列中

:first-of-type---获取队列第一个元素

:last-of-type---获取队列最后一个元素

:nth-of-type(n)---获取队列中第n个元素

内容过滤选择器

:contains(text)

属性选择器

$("元素[属性名='值']")

3.查询和改变元素内容

括号里为空是获取，填值是设置

元素.text("设置的文本");设置或者获取所选元素的文本内容；

元素.html("设置的内容");设置或者获取所选元素的内容（包括html标签）；

元素.val("设置的值");设置或者获取表单字段的值（前提是表单设置了value属性）；

4.获取和改变元素样式

$("元素").css("width")//获取元素的宽(可以获取外部式的样式，原生js只能获取行内样式)；

$("元素).css("属性名","属性值")//改变一个样式

$("元素").css({属性名1:"属性值1",属性名2:"属性值2")

5.操作元素类名的四种方式

元素.addClass("类名")//添加类名

元素.removeClass("类名")//删除类名

元素.toggleClass("类名")//匹配类名，有就删除，没有就添加

元素.hasClass("类名")//检查元素是否有该类名---拥有就返回为true 没有返回false

6.获取和添加修改属性

元素.attr("属性名")//获取自定义属性值

元素.prop("属性名")//获取属性值，只能获取共有属性 w3c定义的属性

元素.prop({属性名1:"属性值1",属性名2:"属性值2"}) //设置属性值

arrt和prop的区别，返回checkbox/radio/select选择性标签的checked或selected属性时，attr是返回属性值或undefind，prop返回的是true或false

7.创建节点 添加节点 删除节点 复制节点

//创建

var el=$("<div id='box'>内容</div>") //可以直接在这里添加内容和属性

//添加节点

父元素.append(子元素)//在父级元素下最后添加一个元素

子元素.appendTo(父元素)//后面几个都不咋用

父元素.prepend(子元素)//在父级元素下第一个添加一个元素

子元素prependTo(父元素)//元素添加到父级元素下第一个元素

兄弟前后关系：after()、insertAfter()、before()、insertBefore()。

//删除

元素.remove()//删除一切，主要用这个

元素.empty()//清空元素下的内容，不算删除，不使用

元素.detach()//删除事件不彻底，不使用

//克隆

var el=元素.clone(true)//变量保存复制的节点，参数true决定了是否复制该节点的方法。添加到购物车会用到

注意：克隆节点要避免ID重复

8.替换节点

老节点.replaceWith(新节点)

新节点.replaceAll(老节点)

9.获取节点

下面全部都要记住

父元素.children()//数组形式获取元素下所有子元素 只能拿到子元素，拿不到后代级 ，不写参数默认获取所有子元素

父元素.find(子元素)//获取父级元素下的指定元素 必须赋参数进行筛选

元素.next()//获取元素紧挨的下一个兄弟元素

元素.prev()//获取元素紧挨的上一个兄弟元素

元素.siblings()//获取其他兄弟元素 //可以使用参数进行筛选

子元素.parent()//获取直接父元素

子元素.parents(指定的父元素)//获取多层外指定的父元素，不给参数获取全部父级

子元素.closest(指定父元素)//必须赋参数，这个方法基本不用

10.each()方法遍历

遍历对象，数组，元素

遍历数组时 i指索引 n指对应的值

遍历对象时 i指属性名 n指属性值

//遍历数组和对象

$.each(arr,function(i,n){

})

//遍历元素

元素.each(function(index,item){

})

11.获取元素距离顶部距离

常常用于楼层导航

元素.offset().top ----返回元素相对于文档顶部的偏移距离。 重重点

元素.scrollTop()----元素的滚动条垂直距离，传参数时可以设置距离。----针对元素本身的滚动条 比如有滚动条的div

12.获取浏览器滚动条距离

获取浏览器显示区域的高度 ： $(window).height();

获取浏览器显示区域的宽度 ： $(window).width();

获取页面的文档高度 ： $(document).height();

获取页面的文档宽度 ：$(document).width();

获取滚动条到顶部的垂直高度 ： $(document).scrollTop(); document可以换成window 重重点

获取滚动条到左边的垂直宽度 ： $(document).scrollLeft();

计算元素位置和偏移量： 元素.offset();

13.监听页面滚动事件

$(window).scroll(function(){//window可以换成document
	console.log($(document).scrollTop())//每次滚动都会打印浏览器滚动条的距离
})

14.事件委派

给父级元素下的未来元素添加事件-----重重点

普通事件只能注册给页面加载后一开始就有的元素，要想注册给后来添加的元素就要用事件委派。

语法结构：//不用这种写法了  被淘汰了 用on替代
$("父元素").delegate("要被委派的子元素","事件名",function(){
	//这里写执行函数
})

常用语法：
$("父元素").on("事件名","要被委派的子元素",function(){
	//这里写执行函数
})

15.绑定事件

一个元素绑定一个事件

语法结构：
元素.on("事件名"，function（）{})
简化版：
元素.事件名（function(){}）

两个事件绑定一个元素 重点记住移入移出例子

元素.on("事件名1 事件名2"，function（）{})//

例：
元素.on("mouseover mouseoout",function(){
	$(this).toggleClass("active)//移入移除自动添加和删除类名
})

一个元素绑定多个事件

链式操作：
元素.on("事件名"，function（）{}).on("事件名",function(){})

对象添加： //存在相同事件同时存在的时候要给事件添加别名 .an-----n值数字
元素.on({
		"事件名"：function(){
		},
  	"事件名"：function(){
    },		
})

16.清除事件

元素.off() //清除全部事件

元素.off("事件1 事件2")//清除多个事件

元素.off("事件名.an") //清除同类型事件的第n个

17.hover（）复合函数

一个事件名，两个回调函数，相当于mouseover 和mouseout集合------常用

元素.hover(function(){
	//鼠标移入事件执行代码
},function(){
	//鼠标移除事件执行代码
})

18.显示隐藏的动画函数

语法：元素.动画函数（时间，特效，回调函数）---//都是可选参数

//普通显示隐藏

元素.show()

元素.hide()

元素.toggle()

//淡入淡出---fade英文意思变淡

元素.fadeIn()

元素.fadeOut()

元素.fadeToggle()

下拉显示隐藏---常用---slide英文意思滑动

元素.slideDown() //下拉显示

元素.slideUp() //上卷隐藏

元素.slideToggle()

19.自定义动画 animate *重重点*

delay()---延迟时间

$("选择器").stop(true).delay(1000).animate({样式名1:"样式值1",样式名2:"样式值2",},设置的动画时间,动画特效,回调函数)

20.stop(true)----清除动画堆砌

21.获取当前元素索引

元素.index()------常用

22.一些jQuery插件

   jquery-ui------让颜色参与动画 //有弊端 一些颜色无效，会被解析成透明

    jqueryeasing------缓动插件（动画特效）

    slide-轮播插件-----让你快速的布置一个轮播图

    jquery-validate----快速进行正则自动验证的操作插件

    juqery-easyui---前端ui框架插件

可以在：http://www.jq22.com去下载更多的插件

23.聚焦事件focus

当输入框聚焦时，发生的事件

元素.focus(function(){})

24.load()方法

load（url,data,functon(){}）方法从服务器加载数据，并把返回的数据放置到指定元素中。三个参数，后两个可选。

例：

$("#div1").load("./home.html");

25.监听hash改变

bom下面的事件。可以直接用在框架上。当页面hash改变时，做相应的操作。

onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。

window.onhashchange=function(){}

26.change事件

当元素的值改变时发生 change 事件（仅适用于表单字段） 只能用于textarea select

二、常用jq功能实现方法

1.正则验证插件使用

前提条件：

1.引入插件 2.获取form表单添加validate方法 然后设置规则和报错 3.可以自定义规则

注意：想验证的input框必须设置name，因为验证全靠name值获取该输入框

使用方法参考：https://www.runoob.com/jquery/jquery-plugin-validate.html

 //自定义规则
jQuery.validator.addMethod("isUser",function(value,element){
                //自定义正则
                var reg=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
                //返回判定结果
                return reg.test(value)
            },"请输入6-12位用户名，第一个字符只能为字母");

$("form").validate({
                //规则
                rules:{
                    user:{//user是用户框的name值
                        required:true,
                      	isUser:true  //调用自定义的规则
                    },
                    pwd:{//pwd是密码框的name值
                        required:true
                    }
                },
                //报错信息
                messages:{
                    user:{
                        required:"请输入用户名"
                    },
                    pwd:{
                        required:"请输入密码"
                    }
                }
            })

2.input事件

jq没有封装input事件，原生js中用oninput事件，在jq中需要用on绑定，这个事件通常用在input输入框

propertychange是兼容ie9的事件

元素.on("input propertychange",function(){
		//执行代码
})