前端基础之jQuery

Write Less, Do More

Posted by youyue on January 7, 2018

一.查找标签

1.1 选择器

基本选择器:

ID选择器:$("#id")
标签选择器:$("tagName")
class选择器:$(".className")
通用选择器:$("*")
配合使用:$("div.c1")  // 找到有c1 class类的div标签

组合选择器:$("#id, .className, tagName")

层级选择器:

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器:

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

使用和注意事项:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1 class的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

注意:

这里的has和not不是简单的 有和 没有的意思,它俩没啥关系(不是一组)
:not和:has通常用.not()和.has()代替。
$("div:has(.c1)")中的:has(.c1)等价于$("div .c1"),也就是找后代里面有c1的div标签。

属性选择器:

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选:

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
例子:$(":checkbox")  // 找到所有的checkbox

表单对象:
:enabled
:disabled
:checked
:selected
例1:
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
例2:
$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

1.2 筛选器:

上一个元素:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

下一个元素:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

父级元素:

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

儿子和兄弟元素:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找元素:

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充:

.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

二.操作标签

2.1 样式操作

样式类:

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

CSS操作
css("color","red")//DOM操作:tag.style.color="red"
例:$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置:

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()的差别在于: .position()是相对于相对于父级元素的位移。

尺寸:

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

2.2 文本操作

HTML:

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本:

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值:

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值

2.3 属性操作

用于ID等或自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio:

prop() // 获取属性
removeProp() // 移除属性
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

2.4 文档操作

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

替换:

replaceWith()
replaceAll()

克隆:

clone([true]) // true 参数可选

三.事件

3.1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

3.2 事件绑定

.on( events [, selector ],function(){})
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数

3.3 移除事件

.off( events [, selector ][,function(){}])
off() 方法移除用[ .on()绑定的事件处理程序。

- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数

3.4 阻止事件

return false; // 常见阻止表单提交等

注意:
像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,   
但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

3.5 页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要   
的一个函数,因为它可以极大地提高web应用程序的响应速度。
$(document).ready(function(){
// 在这里写你的JS代码...
})

简写:
$(function(){
// 你在这里写你的代码
})

3.6 事件委托

事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

四.动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])

五.补充

5.1 each

jQuery.each(collection, callback(indexInArray, valueOfElement)):

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引,ele是每次循环的具体元素。
})

.each(function(index, Element)):

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

终止each循环:

return false;

5.2 .data()

用于存取数据:
.data(key, value):
例:$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
.data(key):
例:$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
例:$("div").removeData("k");  //移除元素上存放k对应的数据

5.3 插件

jQuery.extend(object):

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。
<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展:

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);