jQuery

jQuery

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中是jQuery里的方法。

html()相当于： document.getElementById("i1").innerHTML;

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0] // jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html(); // jQuery对象可以使用jQuery的方法 
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

查找标签

基本选择器

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") // 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样式类的li标签 
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

属性选择器

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

例子：

// 示例





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

表单筛选器

:text
:password 
:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox")   // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked  //被选中的
:selected

例子：

找到可用的input标签

  
  


$( "input:enabled")   // 找到可用的input标签

找到被选中的option：

  北京市
  上海市
  广州市
  深圳市


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

筛选器方法

下一个元素：

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

上一个元素：

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

父亲元素：

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

儿子和兄弟元素：

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

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")  

//等价于$("div p")

eg:
$("div").find("p")
r.fn.init(6) [p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(39)]
              
$("div p")
r.fn.init(6) [p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(1)]

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")   // 从结果集中过滤出有c1样式类的

等价于$("div.c1")

$("div").filter(".radio")
r.fn.init(2) [div.radio, div.radio, prevObject: r.fn.init(39)]

$("div.radio")
r.fn.init(2) [div.radio, div.radio, prevObject: r.fn.init(1)]

补充：

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

$(".checkbox").first()
r.fn.init [div.checkbox, prevObject: r.fn.init(4)]

$(".checkbox").last()
r.fn.init [div.checkbox, prevObject: r.fn.init(4)]

$(".checkbox").not(".radio")
r.fn.init(4) [div.checkbox, div.checkbox, div.checkbox, div.checkbox, prevObject: r.fn.init(4)]

$(".row").has(".o1")
r.fn.init [prevObject: r.fn.init(5)]

$(".row").has(".form-group")
r.fn.init [div.row, prevObject: r.fn.init(5)]

$(".row").eq(1)
r.fn.init [div.row, prevObject: r.fn.init(5)]

操作标签

样式操作

样式类

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

CSS

css("color","red") // DOM操作：tag.style.color="red"

var a = $(".checkbox [type='checkbox']").first()
undefined

console.log(a);
VM4225:1 r.fn.init [input, prevObject: r.fn.init(4)]
undefined

a.css("color","red")
r.fn.init [input, prevObject: r.fn.init(4)]

示例：

$("p").css("color", "red"); // 将所有p标签的字体设置为红色

位置操作

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

.position()和的差别在于：是相对于相对于父级元素的位移。

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

文本操作

HTML代码：

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

文本值：

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

值：

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

例如：

     1 
     2 
     3 
    

  篮球
  足球

设置值：

$("[name='hobby']").val(['basketball', 'football' ]);
$( "#s1").val(["1", "2"])

$("option")
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]

$("option").html()
" 1 "

$("option").text()
" 1  2  3 "

$("option").html('hhhgfdghjhg')
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]

$("option").text(123)
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]

$("[name='hobby']").val(['basketball', 'football' ]);
r.fn.init(2) [input, input, prevObject: r.fn.init(1)]

$( "#s1").val(["1", "2"])
r.fn.init [select#s1]

示例：

获取被选中的checkbox或radio的值：

女

男

可以使用：

$("input[name='gender']:checked").val() 

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同

attr所指的属性是HTML标签属性

而prop所指的是DOM对象属性

可以认为attr是显式的，而prop是隐式的

举个例子：

针对上面的代码，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

如果换成下面的代码：

再执行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

$("#i1").attr("checked")
"checked"
$("#i1").prop("checked")
true

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

执行以下代码：

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

$("#i1").attr("me")
"自定义属性"
$("#i1").prop("me")
undefined

可以看到prop不支持获取标签的自定义属性。

总结一下：

1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

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

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

var a =$("#c1")
undefined

a
r.fn.init [input#c1]
           
var b = $("#i1")
undefined

b
r.fn.init [input#i1]
           
$(a).append(b)
r.fn.init [input#c1]0: input#c1length: 1__proto__: Object(0)

$(b).appendTo(a)   //把b追加到a，和上年的例子一样

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

$(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()// 删除匹配的元素集合中所有的子节点。

var a = $("#c1")
undefined

a.empty()

替换

replaceWith()   //这个替换不是交换，而是把前面一个替换掉
replaceAll()

var a = $("#i2")
undefined
var b = $("#i3")
undefined
a.replaceWith(b)

克隆

clone()// 参数   //可能在代码里面不显示，但是在浏览器上就会发现他克隆了

var a = $("#i1")
undefined

a.clone();
r.fn.init [input#i1, prevObject: r.fn.init(1)]

克隆示例：

    
    
    
    
    



点我试试

事件

常用事件

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

事件绑定

两种绑定方法

方法一
    $("button").click(function () {
        alert("您好啊")
    })

方法二（推荐）
    $("button").on("click",function () {
        alert("你好啊")
    })

1. .on( events [, selector ],function(){})

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

移除事件

1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

阻止后续事件执行

1. return false; // 常见阻止表单提交等
2. e.preventDefault();
3. 注意：

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

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});

$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

阻止事件冒泡

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

实时监听input输入值变化示例：

动画效果

// 基本
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])