jQuery选择器

jQuery选择器的语法:

1
$(selector).methodName();
  • Selector是一个字符串表达式，用于识别DOM中的元素,然后使用 jQuery提供的方法集合加以设置
  • 多个 jQuery操作可以以链的形式串起来，语法如下$(selector).method1().Method2().Method3();

使用jQuery最好先嵌套在ready方法里面.
让页面上所有DOM加载结束后才调用

1
2
3
4
5
<script type="text/javascript">
    $(document).ready(function(){
    //
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
<!--先执行hello world3,之后是hello world1,再执行hello world2-->

<script type="text/javascript">
    $(document).ready(function(){
        alert('hello world1')
    })
    window.onload = function(){
        alert('hello world2')
    }
    alert('hello world3')
</script>

注意:window.onload只能使用一次,但是$(document).ready可以使用无限次

1
2
3
4
5
6
7
8
9
<div id="box1"></div>
		
<script type="text/javascript">
	$(document).ready(function(){
		//为div标签添加文本
		var $div = $("#box1").html("xxxx")
	})

</script>
1
2
3
4
5
#box1{
	width: 100px;
	height: 100px;
	background-color: red;
}

1556502636824

将JQuery对象转为DOM对象:

  • 使用下标
  • 使用get方法
1
2
3
4
5
6
7
8
9
10
<!--JQuery对象转为DOM对象-->
<script type="text/javascript">
	$(document).ready(function(){
		var $div = $("#box1")
        // 使用下标即可转换
        var div = $div[0]
        // 或者使用get方法
        var div2 = $div.get(0)
	})
</script>

DOM对象转为JQuery对象:
调用$方法:

1
2
3
4
<script type="text/javascript">
	div = window.getElementById('box1')
	$div = $(div)
</script>

通过上面两段代码,我们发现:
其实jQuery对象就类似于由dom对象组成的数组.
这种数据类型我们称之为jQuery包装集

基本选择器:

1
2
3
4
// 基本选择器
$('#id')
$('element')
$('.class')

多种匹配条件的选择器:
选择多个选择器
$(selector1,selector2,selector3,...)

1
$('.class,element')

注意:这里的$('.myid,myelement')不是和的关系,而是或的关系.只要.myid或myelement匹配成功即可.
就是说:多种匹配条件的选择器不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回.

通配符选择器:

1
$('*')

层次选择器:

  • ancestor descendant选择器:(祖先后代选择器)

    1
    $('ul li')

  • 直接子元素选择器:

    1
    $('form>input')

  • previous+next选择器:
    匹配紧接在pre元素后的==第一个==next元素.
    注意previous和next是同级元素

    1
    2
    // 匹配div后面的img
    $('div+img')

  • previous~sibling选择器:
    匹配prev元素之后的==所有==sibling元素.
    previous和sibling是同级元素

    1
    2
    // 匹配div后面的所有ul
    $('div~ul')

简单过滤器:
以冒号开头,通常用于实现简单过滤效果的过滤器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 第一个tr
$('tr:first')

// 最后一个tr
$('tr:last')

// 索引值为偶数的tr
$('tr:even')

// 索引值为奇数的tr
$('tr:odd')

// 匹配给定索引值的div
// 匹配第二个div元素
$('div:eq(1)')

// 匹配所有大于给定索引值的元素
// 匹配索引大于0的span元素
$('span:gt(0)')

// 匹配所有小于给定索引值的元素
$('span:lt(2)')

// 匹配所有如h1,h2...的标题元素
$(':header')
// 匹配div元素下的标题元素
$('div:header')

// 匹配所有id不是box的p标签
$('p:not(#box)')
// 匹配没有被选中的input元素
$('input:not(:checked)')

//匹配所有正在执行动画效果的div元素
$('div:animated')

注意:索引从0开始

内容过滤器:
就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
// 匹配含有hyl文本内容的元素
$('li:contains(hyl)')

// 匹配不包含子元素或者文本的空元素
$('li:empty')

// 匹配含有子元素或者文本的元素
// 匹配不为空的单元格,即该单元格中包括子元素或者文本
$('td:parent')

// 匹配含有选择器所匹配元素的元素
// 匹配内部含有p标签的td(就是说含有子标签p的td标签)
$('td:has(p)')

可见性过滤器:
元素的可见状态有两种,分别是隐藏状态和显示状态.

1
2
3
4
5
//匹配可见元素
$(':visible')

//匹配隐藏元素
$(':hidden')

注意：在应用 hidden过滤器时，display属性是none以及input元素的type属性为hiden的元素都会被匹配到.

表单对象的属性过滤器:
表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素

1
2
3
4
5
6
7
8
9
10
11
//匹配所有选中的input元素
$('input:checked')

//匹配所有不可用的input元素
$('input:disabled')

//匹配所有可用的input元素
$('input:enabled')

//匹配所有选中的option元素
$('select option:selected')

子元素过滤器:
子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定.

1
2
3
4
5
6
7
8
9
10
11
12
13
//匹配ul下第一个子元素li
$('ul li:first-chirld')

//匹配ul下最后一个子元素li
$('ul li:last-chirld')

//匹配只含有一个li元素的ul元素中的li
$('ul li:only-chirld')

//匹配ul中索引为偶数的li元素
$('ul li:nth-chirld(even)')
//匹配ul中第3个li元素
$('ul li:nth-chirld(3)')

属性选择器
属性选择器就是通过元素的属性作为过滤条件进行筛选对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//匹配含有name属性的div元素
$('div[name]')

//匹配name属性等于test的div元素
$('div[name="test"]')

//匹配name属性不等于test的div元素
$('div[name!="test"]')

//匹配name属性包含test的div元素
$('div[name*="test"]')

//匹配name属性以test开头的div元素
$('div[name^="test"]')

//匹配name属性以test结尾的div元素
$('div[name$="test"]')

表单选择器:
匹配经常在表单内(<form>)出现的元素,但是匹配的元素不一定在表单中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//匹配所有的input元素
$(':input')

//匹配所有type="button"的input元素
$(':button')

//匹配所有的复选框
$(':checkbox')

//匹配所有的文件域
$(':file')

//匹配所有的不可见元素，或者type为hidden的元素
$(':hidden')

//匹配所有的密码域
$(':password')

//匹配所有的单选按钮
$(':radio')

//匹配所有的重置按钮
$(':reset')

//匹配所有的提交按钮
$(':submit')

//匹配所有的单行文本框
$(':text')

文本操作:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
	$(document).ready(function(){
		var $div = $("#box1")
		//获取div标签文本内容(如果有多个div,那么只会获取第一个div的文本内容)
		console.log($div.text())
        // 为div标签添加hyl作为文本内容(如果有多个div,那么就会设置全部的div文本内容)
        $div.text('hyl')
	})
</script>

注意:

1
2
3
4
5
6
7
8
9
<div class="box1"><p>阿斯达</p></div>
<div class="box1">个好地方</div>

<script type="text/javascript">
	$(document).ready(function(){
		var $div = $(".box1")
        $div.text('hyl')
	})
</script>

两个div都会变成:<div class="box1">hyl</div>

注意:设置文本内容时,如果内容包含HTML代码,也会被认为是普通文本,并不能作为HTML代码被浏览器解析.
如果要作为HTML代码被浏览器解析,需要使用html()方法.

创建标签节点

1
2
3
4
//创建标签
var $p = $('<p title="hyl">hyl</p>')
//在div里插入p标签(如果有多个div,那么每个div都会插入)
$('div').append($p)

插入节点:

  • append(content):
    为所有匹配的元素的内部追加内容

    1
    2
    3
    var $p = $('<p title="hyl">hyl</p>')
    //在div里插入p标签内部
    $('div').append($p)

  • appendTo(content):
    将所有匹配的元素添加到另一个元素集合中

    1
    2
    3
    var $p = $('<p title="hyl">hyl</p>')
    //将p标签添加到div标签中
    $p.apppendTo($('div'))

  • prepend(content):

    1
    2
    3
    var $p = $('<p title="hyl">hyl</p>')
    //将p标签添加到div标签的前面
    $('div').prepend($p)

  • prependTo(content):

    1
    2
    3
    var $p = $('<p title="hyl">hyl</p>')
    //将p标签添加到div标签的前面
    $p.prependTo($('div'))

  • after(content):
    在每个匹配的元素的之后插入内容

    1
    2
    var $p = $('<p title="hyl">hyl</p>')
    $(box1).after($p)

  • insertAfter(content):
    在每个匹配的元素的之后插入内容

    insertAfter与after的关系和append与appendTo的关系类似

    1
    2
    var $p = $('<p title="hyl">hyl</p>')
    $p.insertAfter($(box1))

  • before(content):
    在每个匹配的元素的之前插入内容

    1
    2
    var $p = $('<p title="hyl">hyl</p>')
    $(box1).before($p)

  • insertBefore(content):
    在每个匹配的元素的之前插入内容

    1
    2
    var $p = $('<p title="hyl">hyl</p>')
    $p.insertBefore($(box1))

删除节点:

  • remove():
    用户从DOM中删除匹配的元素

    1
    var $p1 = $("div p:first-child").remove()

  • detach():
    用户从DOM中删除匹配的元素,
    与remove的区别:不会删除该jQuery对象:

    1
    2
    3
    4
    5
    // 之后不可使用$p1
    var $p1 = $("div p:first-child").remove()

    // 之后还可以使用$p1
    var $p1 = $("div p:first-child").detach()

  • empty():

    并不是真正的删除,只是将该标签的内容清空而已.没有内容就不会显示在浏览器中.

    1
    var $p1 = $("div p:first-child").empty()

复制节点:

1
2
3
4
5
var $p1 = $("div p:first-child")
// 创建副本
$p2 = $p1.clone()
// 插入到原来$p1的后面
$p2.insertinsertAfter($p1)

clone()的参数:

1
2
3
4
// 只是复制标签
$p2 = $p1.clone()
// 复制该标签相关的事件处理程序
$p2 = $p1.clone(true)

替换节点:

  • replaceAll(content):

    1
    2
    3
    var $p1 = $("div p:first-child")
    // 使用<div>hyl</div>去替换掉$p1($p1被替换)
    $('<div>hyl</div>').replaceAll($p1)

  • replaceWith(content):

    1
    2
    3
    var $p1 = $("div p:first-child")
    // 将$p1改成<div>hyl</div>
    $p1.replaceWith('<div>hyl</div>')

遍历节点:each

1
2
3
4
5
6
var $p = $("p")

// index就是每个节点的索引
$p.each(function(index){
    $(this).attr('title','我是第'+(index+1)+'个p标签')
})

包裹节点:

  • wrap:包裹节点

    1
    2
    3
    var $span = $("span")
    // 为span标签的外面包裹一层p标签
    $span.wrap('<p></p>')

  • unwrap:去除包裹:

    1
    2
    3
    var $span = $("span")
    // 去除包裹
    $span.unwrap('<p></p>')

  • warpInner:内部包裹:

    1
    2
    3
    var $span = $("span")
    // 为span标签的里面包裹一层p标签
    $span.wrap('<p></p>')

修改标签的CSS属性:
css()

1
2
3
4
5
6
var $span = $("span")
// 修改标签的css属性
$span.css("backgroundColor",'red')

// 获取标签的css属性
$span.css("backgroundColor")

jQuery的事件处理

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	$(document).ready(function(){
	})
</script>

<!--可以简写成-->
<script type="text/javascript">
	$(function(){
	})
</script>

注意:$(document).ready()只要DOM元素就绪便执行该方法.所以可能出现元素的关联文件尚未下载完全的情况.
这时可以使用load方法:该方法会在所有内容加载完毕后再触发,该方法等价于window.onload:

1
2
3
4
5
$(document).load(function(){
})
//等价于
window.onload = function(){
}

jQuery绑定事件:

  • bind

    1
    2
    3
    4
    5
    6
    7
    <div id="box2">
    	<p>1</p>
    	<p>2</p>
    	<p>3</p>
    	<p>4</p>
    	<p>5</p>
    </div>
    1
    2
    3
    4
    // 如果标签很多,那么每个标签都会添加一个绑定事件
    $("div p").bind('click',function(){
        console.log($(this).text())
    })

    bind的问题:

    • 隐式迭代:
      bind会给所有的标签都绑定一个事件(上面有5个p标签,就会绑定5个事件)
    • 对于尚未存在的标签无法绑定事件.

    所以bind一般是绑定id标签的

  • delegate:
    delegate就能解决隐式迭代迭代的问题.
    因为delegate绑定的标签是div标签,不像bind绑定的是p标签

    1
    2
    3
    4
    // 给div绑定事件(这个事件其实是p标签委托给父标签div的)
    $("div").delegate('p','click',function(){
        console.log($(this).text())
    })
    • delegate使用事件委托:
      给div绑定事件,这个事件其实是p标签委托给父标签div的.
      这其实是一种事件冒泡
    • 因为是事件冒泡,所以这也能解决尚未存在的标签无法绑定事件的问题

    事件委托:

    利用时间冒泡给父元素,添加事件处理程序,从而是所有子元素都可以处理该事件.

  • on:
    其实和delegate功能一样,不过参数的位置不太一样:

    1
    2
    3
    4
    // 给div绑定事件(这个事件其实是p标签委托给父标签div的)
    $("div").on('click','p',function(){
        console.log($(this).text())
    })

  • live(基本不用)

移除事件:

1
2
3
4
5
6
// 移除bind事件:
$('div p').unbind('click')
// 移除delegate事件:
$('div p').undelegate('click')
// 移除on事件:
$('div p').off('click')

添加一次性事件:

1
2
3
$('div p').one('click',function(){
    console.log('****')
})

模拟用户的操作触发操作:

  • trigger

    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/javascript">
    	var a = $('#btn').bind('click',function(){
    		console.log('****')
    	})
        // 多次触发
    	a.trigger('click')
    	a.trigger('click')
    </script>

  • triggerHandler:用法和trigger一样.
    但是不会导致浏览器同名的默认行为被执行

    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    	var a = $('#btn').bind('click',function(e,msg1,msg2){
    		console.log(msg1+msg2)
    	})
        // 支持传参
    	a.trigger('click',['hyl','dsz'])
    </script>

模仿鼠标移入移出悬停事件:
hover:接受两个函数作为参数.第一个函数就是鼠标移入触发的函数,第二个函数是鼠标移出触发的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
	var a = $('#btn').hover(function(){
		console.log('鼠标移入')
	},function(){
		console.log('鼠标移出')
	})
</script>

<!--只有移出-->
<script type="text/javascript">
	var a = $('#btn').hover(null,function(){
		console.log('鼠标移出')
	})
</script>

阻止事件冒泡和默认行为:

1
2
3
4
5
6
7
8
9
10
11
12
$('#box').bind('click',function(e){
    $(this).css('background-color','red')
    // 阻止事件冒泡
    e.stopPropagation
}

// 还可以写成:
$('#box').bind('click',function(e){
    $(this).css('background-color','red')
    // 阻止事件冒泡
    return false
}

return false不仅能组织事件冒泡,还能阻止默认行为.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#link').bind('click',function(e){
    var d = window.confirm('是否确认')
    if (d == false){
        // 阻止冒泡
        e.stopPropagation()
        // 阻止默认行为
        e.preventDefault()
    }
})

$('#link').bind('click',function(e){
    var d = window.confirm('是否确认')
    if (d == false){
        // 同时阻止冒泡和默认行为
        return false
    }
})

显示与隐藏:

  • hide([speed,callback])

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script type="text/javascript">
    	$('#btn').click(function(){
            // div会在200毫秒逐渐缩小到消失
    		$('div').hide(2000)
    	})
    </script>

    <script type="text/javascript">
    	$('#btn').click(function(){
            // 在动画结束的时候调用后面的函数
    		$('div').hide(100,function(){
    			console.log('动画结束')
    		})
    	})
    </script>

  • show([speed,callback]):
    很hide一样的操作.

  • toggle([speed,callback]):
    切换显示和隐藏.

淡入淡出效果:

  • fadeout([speed,callback]):
    淡出

  • fadein([speed,callback]):
    淡入

  • fadeToggle([speed,callback]):
    淡入淡出切换

  • fadeTo([speed,透明度]):
    花多长时间变成特定的透明度

滑动显示和消失:

  • slideUp([speed,callback]):
    类似于PPT的向上橡皮擦动画(向上擦掉)
  • slideDown([speed,callback]):
    类似于PPT的向下橡皮擦动画(向下擦出来)
  • slideToggle([speed,callback]):
    切换滑动显示和消失

自定义动画:
animate(params,[speed,callback])

1
2
3
4
// 左边框移动到200px的位置
$('#btn').animate({left:'200px'},1000)
// 移动到左边框+200px的位置
$('#btn').animate({left:'+=200px'},1000)

animate可以链式调用:

1
2
3
// 先执行向左,后执行向上
$('#btn').animate({left:'200px'},1000)
		.animate({top:'100px'},100)

注意,上面代码和下面代码是不一样的:

1
2
// 同时执行向左和向上(就是斜方向运行)
$('#btn').animate({left:'200px',top:'100px'},1000)
1
2
// 透明度变化
$('#btn').animate({left:'200px',opacity:'0.5'},1000)

delay():延迟:

1
2
3
$('#btn').animate({left:'200px'},1000)
    	.delay(1000)
    	.animate({top:'100px'},100)

stop(true,true):停止

  • 第一参数:是否结束后面的动画队列.
    (如果false,只会结束当前动画,后面的动画会继续执行)
  • 第二参数:是否到达当前动画的结尾
    (如果true,则停在原地,如果为false则直接抵达动画的最终态)
1
2
// 判断元素是否在执行动画中
$('#btn').is('animated')

AJAX

1556546560774

同源策略:
要求动态内容(如JavaScript)只能阅读与之同源的那些HTTP应答和cookies,而不能阅读来自非同源的内容.

同源三大要素:
http://22.19.89:8080/script

所以http://22.19.89:8080/script和http://22.19.89:8080/hyl是同源的.虚拟目录不需要相同.

XMLHttpRequest:简称XHR,是实现Ajax的核心

JQurey发起网络请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
	$('#btn').click(function(){
		$.ajax({
			// 请求方法
			type:"get",
			// 请求json文件的网络地址
			url:"http://22.19.89:8080/json",
			// 是否异步(可不写)
			async:true,
			// 给服务器发送的参数
			data:{a:1,b:2},
			// 请求回来的类型(可不写)
			dataType:'json',
			// 成功请求并得到返回数据后调用的函数
			// data:服务器返回的数据
             // textStatus:返回数据的状态,如果成功,返回success
			success:function(data,textStatus){
				var d = data['CATALOG']['CD']
				
				for(var i=0;i<d.lenght;i++){
					var info = d[i]
					var $p = $('<p>'+ info['TITLE'] +'</p>')
					$('#box').append($p)
				}
			}
		});
	})
</script>

Ajax有相关的事件函数:

  • ajaxComplete(callback):Ajax请求完成时执行的函数
  • ajaxError(callback):错误时执行的函数
  • ajaxSend(callback):发送前执行的函数
  • ajaxStart(callback):请求开始时执行的函数
  • ajaxStop(callback):请求结束时执行的函数
  • ajaxSuccess(callback):请求成功时执行的函数