jQuery学习笔记

一.选择器:

• id选择器 $("#id属性的值")
• 标签选择器 $(“标签名字”)
• 类选择器 $(".类样式的名字")
• 交集选择器 $(“标签.类样式的名字”)---->标签+类选择器
• 并集选择器 $(“选择器,选择器,选择器,…”)---->多条件选择器
• 都可以看成是筛选器
• 索引选择器 $(“选择器:eq(索引的值)”)
• 奇数筛选器 $(“选择器:odd”)
• 偶数筛选器 $(“选择器:even”)
• 筛选器 $(“选择器:lt(索引)”)—>获取小于这个索引的元素
• $(“选择器:gt(索引)”)—>获取大于这个索引的元素
• 其他选择器
• $(“选择器:last”)---->最后一个
• $(“选择器:first”)---->第一个
• 获取当前元素的其他的方法
• 当前元素.next()---->下一个兄弟元素
• 当前元素.nextAll()—>后面所有的兄弟元素
• 当前元素.prev()---->前一个兄弟元素
• 当前元素.prevAll()–>前面所有的兄弟元素
• 当前元素.siblings()–>所有的兄弟元素(没有自己)
• 当前元素.parent()—>父级元素
• 当前元素.children()—>当前元素中所有的子元素(直接的子元素)
• 当前元素.find(“选择器”)—>从当前元素中找某个或者是某些元素

二.方法:

• .val()---->操作表单元素的value属性,可以获取也可以设置

• .text()---->操作元素中间的文本内容的,相当于innerText

• .html()---->操作元素中的html代码及内容,相当于innerHTML

• .css()----->操作元素的样式

• .addClass()—>添加类样式

• .removeClass()–>移除类样式

• .hasClass()—判断元素是否应用了类样式

• .index()---->元素的索引

• attr(“属性”,“值”);

• removeAttr(“属性”);移除这个自定义属性

• attr(“属性”);获取该属性的值

• prop()方法

• prop(“checked”);---->布尔类型

• prop(“checked”,布尔类型的值);

下面的这些动画的方法,一般都可以使用两个参数,参数1:时间,参数2:回调函数

• 参数—时间:1000毫秒—1秒

• 参数—时间:slow—慢,normal—正常,fast—快

• .show()—>显示

• .hide()—>隐藏

• .stop()---->停止动画

• animate()—>动画的方法

• slideUp()---->滑入

• slideDown()—>滑出

• slideToggle()—>切换滑入和滑出

• fadeIn()---->淡入

• fadeOut()—>淡出

• fadeToggle()—>切换淡入淡出

• fadeTo(时间,透明度的值)

• 元素创建:

• $(“html的代码”)

• 元素的添加

• 父级元素.append(子级元素);

• 子级元素.appendTo(父级元素);

clone()克隆元素

• 父级元素2.append($(“父级元素1>子级元素”));,相当于剪切过去的
• 设置或者获取元素的宽和高
• .width()—>获取 .width(值);—设置宽度
• .height();–>获取 .height(值);–设置高度

获取或者是设置元素的left和top

• .offset()----->返回的是一个对象,该对象中两个属性,left和top
• 在offset()方法获取left或者是top的时候是包括margin的值
• .offset({“left”:值,“top”:值});---->设置
• .scrollLeft()---->向左卷曲出去的距离
• .scrollTop()---->向上卷曲出去的距离

为元素绑定事件几种方式

• 对象.事件名字(事件处理函数);----------->$("#btn").click(function(){});

• 对象.bind(“事件名字”,事件处理函数);----->$("#btn").bind(“click”,function(){});

• 父级对象.delegate(“子级元素”,“事件名字”,事件处理函数);---->$("#dv").delegate(“p”,“click”,function(){});

• 对象.on(“事件名字”,“子级元素”,事件处理函数);

  对象.事件名字(事件处理函数);—>普通的写法

  • 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数

  • 前两种方式只能为存在的元素绑定事件,后添加的元素没有事件

  下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件

  • 对象.delegate(“选择器”,“事件名字”,事件处理函数);
  • 父级元素调用方法,代理子级元素绑定事件
  • 对象.on(“事件名字”,“选择器”,事件处理函数);
  • 父级元素调用方法,代理子级元素绑定事件
  • 因为delegate方法中是调用的on的方法
  • 所以,以后直接用on就可以了

事件解绑的几种方式

• bind方式绑定事件,使用unbind()解绑
• 使用delegate绑定事件,使用undelegate()解绑
• 使用on绑定事件，使用off()解绑事件
• 总结:使用什么方式绑定事件,推荐用对应的方式解绑事件

jQuery里的阻止事件冒泡

• 直接用return false;已经处理过兼容性的问题了
• 在Js中的阻止事件冒泡的方法是在事件处理函数中加入一个事件处理参数e。
  1. e.stopPropagation();--------->chrome和火狐支持
  2. window.event.cancalBubble------------>ie8支持的

事件参数对象,jQuery中事件参数对象同样存在

• e.button---->鼠标按键的键值
• e.altKey-----用户是否按下了alt键-----布尔类型
• e.shiftKey—用户是否按下了shift键—布尔类型
• e.ctrlKey----用户是否按下了ctrl键----布尔类型
• e.keyCode—键盘的按下键的值
• e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
• e.currentTarget这个属性得到的是触发该事件的当前的对象
• e.delegateTarget这个属性得到的是代理的这个对象