【笔记】jQuery学习

jQuery

启动运行(和window.onDOMContentLoaded(function(){})功能相同
$(document).ready(function(){ })或者$(function(){ })

顶级代码$

$=jQuery
jquery对象和DOM对象不能混用，只能使用对应的方法

DOM和jQuery互相转换

$(DOM对象) jQuery对象[index]或jQuery对象.get(0)
有的方法jQuery没有封装，这样转换后则可以使用

基础选择器

$(“选择器”) 选择器格式和css相同

筛选选择器

父子选择器

siblings找到的兄弟不包括自己

属性修改

show() 显示元素 hide()隐藏元素

修改样式

$(“div”).css(“属性”,”值”) 或者 $("div").css('属性1':'值1','属性2':'值2')
//因为有隐式迭代（隐含for循环），$(“div”)可以是伪数组

设置类方法

1. $(“div”).addClass(‘‘current’’);
2. $(“div”).removeClass(‘‘current’’);
3. $(“div”).toggleClass(‘‘current’’); //有该类时remove，无该类时add

原生 JS 中 className 会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

显示
show([speed,[easing],[fn]])
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
（其他效果参数同上
特殊：fadeTo([[speed],opacity,[easing],[fn]])，必须写目标透明度

事件切换

hover([mouseover,]mouseout)
只填一个函数则鼠标经过和离开都会触发它

动画队列

Q：不希望动画被多次触发出现排队效果（鼠标已经离开但效果还在排队）
A：使用stop()，stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

animate

animate(params,[speed],[easing],[fn])
params: 想要更改的样式属性，以对象形式传递({}中加键值对，不带引号)，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

获取属性

prop('属性') 自定义属性用attr()

设置属性

prop('属性','属性值') 自定义属性用attr()

数据缓存 data()

data(''name'',''value'') // 向被选元素附加数据
date(''name'') // 向被选元素获取数据
这样添加的数据不会像属性一样出现在html里，而是存在了缓存中

这个方法也可以获取之前所说的data-index自定义属性
console.log($('div').data('index'));
返回的结果是数字型

获取内容

html() 相当于innerHTML()
text() 相当于innerText()
val() 获取/设置表单的值，相当于value()

元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。
如果想要给同一类元素做不同操作，就需要用到遍历。

语法一：
$("div").each(function (index, domEle) { xxx; }）

案例
each每次循环时，index和domEle的指向是递增的，思想是让递增的i指向不同的目标效果（如图中是指向了arr数组中不同的颜色），在循环中就可以赋给不同的domEle

语法二：
$.each(object，function (index, element) { xxx; }）
这个方法主要用于处理数据，object中不仅仅可以填jQuery对象，还可以填数组等。

创建元素

$('<li></li>') 动态地创建了一个li元素

添加元素

element.append(''内容'') 放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'') 放入匹配元素内部最前面。

element.after(''内容'') 把内容放入目标元素后面。
element.before(''内容'') 把内容放入目标元素前面。

删除元素

element.remove()删除元素本身
element.empty()删除所有子元素
element.html(" ")清空匹配的元素内容，同时可以设置新内容

jQuery尺寸

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。

jQuery 位置

① offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。该方法有2个属性 left、top，可以设置值。
②position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。不可以设置left、top的值
③ scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧(可以用来设置“滚动到一定位置出现返回顶部标志”)

jQuery事件

事件注册
element.事件(function(){})
和原生的基本一致

绑定事件
① 可以同时绑定多个事件（以对象的形式
element.on(events,[selector],fn)

$(“div”).on({
  mouseover: function(){}, 
  mouseout: function(){},
  click: function(){}	
}); 

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
   $(this).toggleClass(“current”);
  }); 

② on()还可以做事件委派
把对li的事件委派给父元素ul

$('ul').on('click', 'li', function() {
    alert('hello world!');
}); 

③ on()还可以给未来动态生成的元素绑定事件

$("div").on("click",”p”, function(){
     alert("俺可以给动态生成的元素绑定事件")
 });  
 $("div").append($("<p>我是动态创建的p</p>"));     

off()解绑事件
如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

jQuery插件

网站：
jQuery之家-推荐！
jQuery 插件库
使用方法：

1. 解压后把css和js文件夹复制粘贴到目标位置
2. 在自己的html文件中引入新的css和js（内部css和js也记得一起复制）

在下载的网页中有参数的说明，一定要看