jq知识点概述

jq第一天

知识点一入口函数跟load使用效果一样可以在上面写script

语法规范是$(document).ready(function(){}); $(function(){});

知识点二

1、$是JQuery的简称，作用一样 $是JQuery的顶级对象使用它封装元素就可以调用函数 show() 显示元素 hide隐藏元素

2、操作css方法

（1）元素.css('改那种'，'改成啥')，如果后面的值不写那就返回元素本身的这个值不会改变

（2）如果需要更改多个属性是里边包含的对象的形式数字可以不加引号其余要加

语法规范 $('div').css({ color:"red", backgroundColor:"pink", width:200 })

（3）设置类的样式方法

*1.addClass('类名'); 给元素添加类名

*2.removeClass('类名') 给元素移除类名

*3.toggleClass('类名') 给元素切换类

知识点三区分和转换

(1)区分dom对象（原生js也就是docment获取元素的方法）和 JQuery 对象（含$符号的）

(2)把div的dom对象转换成JQuery对象注意括号里边是不需要加引号的语法规范 $(需要转换的元素)

(3)把div的JQuery对象转换成dom对象

语法规范 1、$('div')[index索引号] 注意JQuery对象的返回值是一个伪数组可以通过【索引号】的办法转换

2、$('div').get(索引号)

知识点四

通过选择器的办法获取元素等同于css 语法规范 $("元素种类");

知识点五

隐式迭代：遍历内部dom元素的过程比如实现某个JQuery元素的样式更改语法规范 $("元素种类").css('属性值'，'更改内容');

知识点六

筛选选择器 (1)元素:first 选择第一个

(2)元素:last 选择最后一个

(3)元素:eq(index索引号) 选择索引号是几的

(4)元素:odd 选择索引号是奇数行的 (5)元素:even 选择索引号是偶数行的

知识点七

筛选选择器之方法父子兄选择

(1)元素.parent() 直属父级亲爸爸

(2)元素.children("元素") 直属子级的元素亲儿子

(3)元素.find('元素') 查找下面所有的的元素

(4)元素.siblings('元素') 查找除了自己外的所有的兄弟元素

(5)元素.nextAll() 查找当前元素之后的所有同辈元素

(6)元素.prevAll() 查找当前元素之前的所有同辈元素

(7)元素.hasClass("类名") 检查当前元素是否含有某个特定的类有返回true没有返回false

(8)元素.eq(索引号) 查找元素的第几个索引号的元素

知识点八

1.动画方法之显示隐藏

（1）元素.hide（时间，运动速度，回调函数）隐藏

（2）元素.show（时间，运动速度，回调函数）显示

（3）元素.toggle（时间，运动速度，回调函数）切换

2.动画方法之上下滑动

（1）slideUp(时间，运动速度，回调函数) 向上滑动

(2) slideDown(时间，运动速度，回调函数) 向下滑动

(3) slideToggle(时间，运动速度，回调函数) 转换

知识点九事件切换 hover

（1）元素.hover（mouseover，mouseout）； hover事件里边的参数对应的是一个鼠标经过一个鼠标离开

（2）语法规范元素.hover(function(){},function(){})

（3）如果hover里只写了一个函数那么鼠标经过和离开都会触发，可以写切换的

知识点十淡入淡出动画效果 fade()

(1) 元素.fadeIn() 动画淡入效果

(2) 元素.fadeOut() 动画淡出效果

(3)元素.fadeToggle() 动画切换效果

(4)元素.fadeTo(时间，透明度) 调整动画透明度效果里边数值必填

(5) stop() 停止上一个动画防止点击多次动画排队

知识点十一自定义动画 animate(prams更改样式属性，[speed]预定速度，[easing]运动速度，[fn]回调函数)

(1)更改样式属性必须是对象的形式，其余属性跟上边一致语法规范元素.animate({width:20});

jq第二天

知识点概述

知识点一属性操作

（1）元素.prop("属性名") 获取元素的固有属性值元素.prop("属性名","属性值") 更改属性值 $("a").prop("href") $("a").prop("href","http://www.baidu.com")

（2）元素.sttr("属性名") 获取元素的自定义属性值更改同上

（3）元素.date("属性名") 数据缓存date（）不展示在结构里获取内存属性值如果用来获取date-index 注意返回是数字型，而且date写在外面

知识点二元素：checked 得到的是点击的个数

知识点三

（1）元素.parents("元素名") 可以查找到祖先级的某个元素

（2）元素.toFixed(个数) 可以保留元素到第几位小数上

(3)元素.html() 元素.html("修改的内容") 获取元素包含标签的内容和修改元素里边的内容

（4）元素.text() 元素.text("修改的内容") 获取元素的纯文本内容不包含标签和修改元素里边的内容

（5）元素.val() 元素.val("修改的内容") 获取表单元素的内容和修改表单元素里边的内容

(6)元素.substr(数字) 截取数字就是从第几位开始

知识点四遍历元素

（1）元素.each(function（i,ele）{}) 遍历元素第一个参数i代表的索引号第二个参数ele代表的是元素值

（2）$.each(元素，function（i,ele）{}) 遍历元素可以遍历数组和对象

知识点五创建添加删除元素

1、创建元素 var li = $("<li>我是创建的小li</li>")

2、添加元素（

1）内部添加 $("ul").append(li); 添加小li在ul里放在元素的最后面 $("ul").prepend(li); 添加小li在ul里放在元素的最前面

（2）外部添加元素.before(添加的创建好的元素) 添加在元素前面元素.after（添加的创建好的元素）添加在元素后面

3、删除元素

（1）元素.remove() 删除元素

（2）元素.empty() 删除元素下的所有子节点孩子

（3）元素.html("") 删除元素下的所有子节点孩子

jq第三天

<!-- 知识点概述

-----------------------------------------------分割线------------------------------------------------

知识点一 on事件处理

（1）on可以绑定多个函数里边是对象类型

代码示范：$("div").on({

mouseenter:function(){

事件处理程序

cilck:function(){

事件处理程序

}

})

（2）多个事件同一个处理函数的也可以使用on

$("div"),on("mouseenter mouseleave",function(){

})

（3）事件委派子元素触发事件事件绑定在父元素身上 li触发事件事件绑定在ul身上

$("ul").on("click","li",function(){

事件处理程序

})

（4）on可以给未来动态创建的元素（通过append添加的元素）添加事件

代码示范：$("ol").on("click","li",function(){

事件处理程序

})

-----------------------------------------------分割线------------------------------------------------

知识点二 off解绑事件

（1）元素.off() 解除元素身上的所有事件

（2）元素.off("事件类型") 解除对应类型的事件比如点击经过

（3）绑定元素.off("事件类型","触发对象") 解除事件委托

-----------------------------------------------分割线------------------------------------------------

知识点三 one() 单次触发事件用法等同于on

代码展示：$("元素").on("click",function（）{})

-----------------------------------------------分割线------------------------------------------------

知识点四自动触发事件trigger()事件

（1）元素.事件类型() 代码展示$("div").click()

（2）元素.trigger("事件类型") 代码展示 $("div").trigger("click");

（3）元素.triggerHandler("事件类型") 代码展示$("div").triggerHandler("click");

（4）triggerHandler 和 trigger 最大的区别是 triggerHandler不会触发默认行为

-----------------------------------------------分割线------------------------------------------------

知识点五对象拷贝 $.extend(deep,target（空）,object（有内容）)

(1)depp指的是深复制还是浅复制 true 和false 不写默认为false 浅复制

浅复制就是把复杂数据类型中的地址复制给目标对象，修改目标对象会影响原始数据

深复制就是把所有数据完全复制给目标对象修改目标对象不会影响原始数据

（2）target 目标对象复制给她

（3）object 原始对象要被复制的内容

-----------------------------------------------分割线------------------------------------------------

知识点六多库共存 $符号冲突

（1）$符号冲突可以把JQuery里面的$符号换成JQuery("元素"); 作用等同

（2）可以自定义$符号变量 = $(JQuery).noConflict(); 变量作用等同于$

-----------------------------------------------分割线------------------------------------------------

知识点七字符串和数组之间互相转换

（1）localStrange本地存储只能存储字符串形式

（2）数组转换字符串 JSON.stringjfy(需要转换的数组名字)

（3）字符串转换数组 JSON.parse(需要转换的数组名字)

-----------------------------------------------分割线------------------------------------------------

知识点八获取元素的大小

（1）元素.empty() 清除元素下的所有内容

（2）元素.width()/height(300) 获取元素本身的宽度高度更改里面直接写数字就行了返回的数值是数字型

（3）元素.innerWidth/innerHeight 获取元素包含padding值得宽高

（4）元素.outerWidth/outerHeight 获取元素包含padding border的宽高

（5）元素.outerWidth(true)/outerHeight(true) 获取元素包含padding border margin值得宽高

-----------------------------------------------分割线------------------------------------------------

知识点九获取元素的距离

（1）元素.offset() 获取元素距离文档位置的偏移跟父级元素没有关系是距离文档可以设置可以获取

代码展示：元素.offset({

top:200,

left:200

})

（2）元素.position() 获取元素距离带有定位的父级元素的距离可以获取不能设置

代码展示：元素.position({

top:200,

left:200

})

（3）元素.scrollTop()/scrollLeft() 获取文档滚动元素被卷去的头部/左侧的距离

代码示范元素.scrollTop();

(4)元素.offset().top 获取的是元素到文档上方的距离

-----------------------------------------------分割线------------------------------------------------

知识点十 animate()方法

（1）animate() 动画函数只针对于元素不能直接给docment文档加需要先转换成dom元素里边放的也是对象

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

（2）splice（a，b）删除数组的方法里边两个数值从哪个位置开始删除删除几个元素