第十二章 Jquery

Write Less，Do More

简介

1.基本选择器上

序号	选择器	解释
1	$(‘tagName’)	根据元素名拿取元素
2	$(’.className’)	根据class属性值来拿取元素
3	$(’#idName’)	根据id属性值来拿取元素
4	$(‘tagName.className’)	拿取具有特定id或者class的特定元素
5	$(‘sel1,sel2,selN’)	只要满足其中任意一个，就可以成功选取
6	$(‘sel1 sel2 selN’)	根据左祖先右后代的原则，精确拿取具有继承关系的子元素
7	$(’*’)	拿取所有元素
8	$(‘sel1 > sel2’)	拿取元素特定的子元素，注意仅仅拿取子元素
9	$(‘sel1 + sel2’)	拿取sel2以下三个条件缺一不可 1.向下选取2.必须紧邻3.互为兄弟
10	$(‘sel1 ~ sel2’)	拿取sel2以下两个条件缺一不可 1.向下选取2.互为兄弟

1.1 拓展css()

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>1)基本选择器</title>
	</head>
	<body>
		<div id="container">
			<span>我是段落之前的span</span>
			<p id="pra">
				<span>我是段落内部的span</span>
			</p>
			<span>我是段落之后紧邻的span</span>
			<span>我是段落之后不紧邻的span</span>
		</div>

		<!--
			如果要在页面使用jQuery类库直接引入类库文件到页面即可
			注意优先引入jQuery类库文件，其次书写我们自己的文件

			jQuery最新版本为3.4.1版本

			jQuery类库文件-后为版本号
			1.XX:兼容老旧浏览器 ie 6 7 8 等
			2.XX:不兼容老旧浏览器
			3.XX:为目前最新版本，注意与LayUI兼容性较差
			如果带有min后缀则表示迷你版，类似jre，在运行阶段使用，体积只有正式版四分之一大小
		-->
		<script src="./script/jquery-3.4.1.js"></script>
		<script>
			/*
			*   ##jQuery元素与Js元素（节点）是同一种元素吗？如果不是？为什么？两者如何转换？
			*
			*   不是同一种元素
			*   两者无法使用对方的方法 函数 属性等等
			*
			*   eg:
			*
			*               <span id="sp">XXX</span>
			*
			*
			*   js:
			*       let nodeSpan = document.getElementById('sp')
			*
			*       <span id="sp">XXX</span>
			*
			*
			*
			*
			*   jQuery:
			*       在jQuery当中$(sel),sel是selector选择器的缩略写法，使用jQuery强大的选择器机制可以
			*       更方便和准确的拿取元素
			*
			*       let $jq_span = $('span#sp')
			*
			*       [<span id="sp">XXX</span>]
			*
			*
			*
			*
			*       `${}`   模板字符串
			*
			*       ${}     el表达式
			*
			*       $()     jQuery四函数之一，拿取元素
			*
			*
			*       nodeSpan != $jq_span
			*
			*       jQuery元素是对Js的dom节点一个轻度的封装，jQuery元素不能使用
			*       dom中的各种方法 函数 属性等，相反dom节点也不能使用jQuery中的各种函数 方法 和属性
			*       eg:
			*           nodeSpan.innerHTML = XXXXX
			*
			*           $('#sp').html(XXXXX)
			*
			*
			*       两者进行转换
			*
			*           jQuery ===> Dom
			*
			*           $('#sp')[0]
			*           $('#sp').get(0)
			*
			*           Dom ===> jQuery
			*
			*           $(nodeSpan)
			* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			*
			*       学习jQuery类库时，必须首先掌握选择器机制，John Resig借鉴了
			*       CSS的选择器机制可以更加简便快速的从页面拿取元素
			*
			*       1)  $('tagName')
			*           根据元素名拿取元素
			*
			*       2)  $('.className')
			*           根据class属性值来拿取元素
			*
			*       3)  $('#idName')
			*           根据id属性值来拿取元素
			*
			*       4)  $('tagName.className')
			*           $('tagName#idName')
			*           拿取具有特定id或者class的特定元素
			*
			*       5)  $('sel1,sel2,selN')
			*           只要满足其中任意一个，就可以成功选取
			*
			*       6)  $('sel1 sel2 selN')
			*           根据左祖先右后代的原则，精确拿取具有继承关系的子元素
			*
			*       7)  $('*')
			*           拿取所有元素
			*           拿取所有元素
			*
			*       8)  $('sel1 > sel2')
			*           拿取元素特定的子元素，注意仅仅拿取子元素

						设置元素的样式
							css({样式名1:样式值1,样式名2:样式值2,样式名N:样式值N})
								注意此种书写格式中样式名使用js的书写方式不能出现-，必须遵循驼峰命名
								eg:
									background-color ===> backgroundColor

							css('样式名','样式值')
			* */
			$('div#container > span').css({backgroundColor:'pink',color:'navy'})
			/*
			*
			*       9) $('sel1 + sel2')
			*
			*           以下三个条件缺一不可
			*           a:向下选取
			*           b:必须紧邻
			*           c:互为兄弟
			*           拿取sel2
			* */
			$('p#pra + span').css('border','solid 2px coral')
			/*
			*       10) $('sel1 ~ sel2')
			*
			*           以下两个条件缺一不可
			*           a:向下选取
			*           b:互为兄弟
			*           拿取sel2
			* */
			$('p#pra ~ span').css('text-decoration','underline')
		</script>
	</body>
</html>

2.基本选择器下

<ul>
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
    <li>我是列表4</li>
    <li>这里是列表6</li>
    <li></li>
    <li><span class="test7">测试7</span></li>
    <li style="display:none">我是隐藏的测试8</li>
    <li id="test9">测试9</li>
    <li id="test10">测试10</li>
    <li id="thisis11">测试11</li>
    <li class="etoak">测试12</li>
    <li>我是列表5</li>
</ul>

<h1>我是一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>

性别:
<input type="radio" name="gender" value="0" checked>女
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">其它
<br>

序号	选择器	描述
1	$(’:first’)	拿取第一个元素，注意在冒号之前一般添加一个元素名，表示第一个什么元素
2	$(’:last’)	拿取最后一个元素
3	$(’:eq(index)’)	拿取匹配index索引值的元素，索引值从0开始
4	$(’:gt(index)’)	拿取大于index索引值的元素
5	$(’:lt(index)’)	拿取小于index索引值的元素
6	$(’:even’)	拿取索引值为偶数的元素
7	$(’:odd’)	拿取索引值为奇数的元素

$('li:first').css('color','red')
$('li:last').css('color','navy')
$('li:gt(2)').css('font-family','DFPWaWaW5')
$('li:lt(2)').css('font-family','DFPKanTingLiuW9')
$('li:eq(2)').css('font-family','DFPHaiBaoW12')

$('li:odd').css('background-color','pink')
$('li:even').css('background-color','lightblue')

序号	选择器	描述
1	$(’:header’)	拿取所有的标题
2	$(’:contains(text)’)	拿取含有特定文本的元素，注意含有
3	$(’:empty’)	拿取元素内部为空的元素，也没有内容也没有子元素
4	$(’:has(sel)’)	拿取元素内部含有特定结构的元素，这个sel又是一个选择器
5	$(’:hidden’)	拿取隐藏的元素，注意这里:前面必须添加限定条件,否则拿取的隐藏元素肯定不是我们设置的隐藏元素
6	$(’:visible’)	拿取所有可见元素

$(':header').css('background-color','yellow')
//text(text):就是js中的innerText的jQuery版，向元素中添加文本，不支持超文本
$('li:contains(里是)').text('我是修改的文本')
//
$('li:empty').html('<span style="color:whitesmoke">我是添加的超文本</span>')
$('li:has(span.test7)').css('color','purple')

注意

序号	选择器	描述
1	$(’[属性名=属性值]’)	拿取匹配属性名完全匹配属性值的元素，必须一字不差
2	$(’[属性名!=属性值]’)	拿取属性名为等于属性值的特定元素
3	$(’[属性名^=属性值开头]’)	拿取属性名以属性值开头的特定元素
4	$(’[属性名*=属性值]’)	拿取属性名包含属性值的特定元素
5	中间的替换成$=，	拿取属性名以属性值结尾的特定元素

$('li[id=test9]').css('border','dotted 3px deeppink')
$('li[id^=test1]').css('border','double 2px blue')
$('li[id*=s]').css({fontStyle:'italic'})
$('li[class$=ak]').css('border','dotted 10px maroon')

注意：选择元素之后的parent()和children()方法依旧可以使用选择器切记切记

<tr>
	<td>1</td>
    <td>
    	<span>怎么获取1</span>
        <span>怎么获取1</span>
    </td>
</tr>
<script>
	$('span').click(function(){
        let id = $(this).parent().parent().children(':first').text()
    })
</script>

3.面试题

1.jQuery元素与Js元素（节点）是同一种元素吗？如果不是？为什么？两者如何转换？

2.js中的onload与jquery中的ready()的不同

4.常用函数

$(‘sel’)

在括号内书写选择器，用来在全文拿去元素

$(‘html’)

在括号内书写html超文本内容，一般多搭配一些方法使用

$(dom)

其实就是类型字啊转换，将dom元素放置在括号中进行元素的转换

$(document).ready(function{})

类似于js中的onload，表示全文结构加载完毕，在jQuery中一般将所有的函数书写在ready()中，这个ready()执行说明全文加载无误，类似java中的主方法，在绑定事件推荐全部放置在此方法的毁掉函数内

缩略写法$(function{}),详情请见 Jquery中的四个核心函数.txt

链接: https://pan.baidu.com/s/1Bpw3lAlOA-dYlIdlIZuq1g 提取码: mfgb

5.绑定事件

给元素绑定多个事件

/**
	sel.on('事件1 事件2 事件N',function(){
		只要满足以上事件中的任意一个就可以激发这个回调函数
	}
	注意在jQuery中激发事件与js完全一致，但是没有on开头
*/
$('button:contains(是一个按)').on('click mouseout',function(){
    /*
	*   $(this):表示已经通过选择器等拿取的元素列表
	*   当一次拿取的多个按钮，通过单击激发事件时，$(this)就表示
	*   被点击的那一个
	*   sel.attr('属性名',被修改的属性值)
	*       表示修改元素属性的属性值为第二个参数
	*/
    $(this).attr('disabled',true)
})

给元素绑定特定激发事件

/**
	sel.事件(function(){
	   满足事件时激发
    })
*/
$(document).dblclick(function(){
    console.log('我被双击啦！！！')
})

6.常用方法

css（）

/*选定元素添加css样式
	有以下两种格式
	1.
	css({样式名1:样式值1,样式名2:样式值2,样式名N:样式值N})
	注意此种书写格式中样式名使用js的书写方式不能出现-，必须遵循驼峰命名
	2.css('样式名1','样式值1')只能书写单个
*/
$('#show').css({
    backgroundColor:'red',
    color:'navy'
})
$('tb').css('background-color','red')

append()与appendTo()

/*
*   A和B本来没有任何关系
*   如果
*   A.append(B)
*   则A为父元素，B为子元素，如果A中存在子元素，则B追加到
*   A的子元素之后，不会覆盖原先子元素
*   类似于js中的appendChild()
*
*   B.appendTo(A)
*   注意此方法等价与A.append(B)
*/
$('table#tb1').append($('<tr><td>我是添加的一行</td></tr>'))

$.trim()与val()

/*
*   $.trim():去掉字符串两边的空格
*   val():表示拿取元素的value属性
*/
$.trim($(this).val())

.hover()

/*
*   sel.hover(
*       function(){
*           鼠标滑过执行此函数
*       },
*       function(){
*           鼠标滑出执行此函数
*       }
*   )
* */
$('div#test').hover(
/*
*   removeClass():删除class属性
*   addClass():添加class属性
*   toggleClass():如果存在属性则删除，如果不存在则添加
* */
    function(){
        $(this).removeClass().addClass('red')
    },
    function(){
        $(this).removeClass().addClass('blue')
    }
)

one()

/*
	与on类似，仅仅激发一次，一次之后失效
*/

before()和after()

/*
*   A和B两个元素没有任何关系
*
*   A.before(B)调用之后BA，两者紧邻互为兄弟
*   A.after(B)调用之后AB，两者紧邻互为兄弟
* */
$('span:contains(测试1)').before($('span:contains(测试2)'))

remove()和empty()

/*
	remove()删除元素本身和子元素及其内容
	empty()删除子元素及其内容
*/

replaceWith()和replaceAll()

/*
	A和B没有任何关系
	A.replaceWith(B):A被B替代，A不存在了只有B
	B.replaceAll(A):等同于A.replaceWith(B)
*/

each()

/*
	循环体.each(function(下标){})
*/
$('ul li').each(function(index){
    if(index==2){
        $(this).css({backgroundColor:'coral'})
    }
})

clone()

/*
	克隆一个元素，包括其结构动作样式等一系列要素
*/
$('div#add').html($('table#tb1').clone())

7.侧边工具栏效果

需要用到的方法

方法	描述
$(this)	此处获取的是成功激发事件的那个元素
children()	拿取元素的子元素，如果括号内有元素名，则表示拿取元素的特定子元素
show()	显示元素
hide()	隐藏元素
end()	返回用户上一步dom操作（破坏性操作）的元素列表
siblings()	拿取除本元素外其他的兄弟元素破坏性操作
slideDown()	卷帘显示
slideUp()	卷帘隐藏
slideToggle()	如果显示中，则卷帘隐藏，如果隐藏时，则卷帘显示
fadeIn()	淡入
fadeOut()	淡出

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>4)破坏性操作</title>
		<style>
			#menu{
				width:150px;
			}
			.has_children{
				background-color: cornflowerblue;
				color: wheat;
				cursor: pointer;
			}
			/*
				设置默认不显示的样式
			*/
			.highlight{
				background-color: coral;
				color:crimson;
			}
			div a{
				float:left;
				width:150px;
				background-color: silver;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div class="has_children">
				<span>一:第一章</span>
				<a href="#">CoreJava</a>
				<a href="#">Oracle</a>
				<a href="#">Mysql</a>
				<a href="#">Xml</a>
			</div>
			<div class="has_children">
				<span>二:第二章</span>
				<a href="#">Js</a>
				<a href="#">jQuery</a>
				<a href="#">Vue</a>
				<a href="#">React</a>
			</div>
		</div>
		<script src="./script/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$('div.has_children').click(function(){
                    $(this).addClass('highlight').children('a')                    							.slideDown().end().siblings().removeClass('highlight')
                    .children('a').slideUp()
				})
			})
		</script>
	</body>
</html>

8.jQUery的异步请求

$.ajax()

$.ajax({
    //1.发送异步请求的目的地
    url:'check',
    //2.发送异步请求的类型
    type:'post',
    //3.是否使用同步，默认true使用
    async:true,
    //4.传递的值，格式 k=v&k2=v2
    data:`name=${$jq_input.val()}`,
    //5.返回的数据类型
    /*有以下五种返回类型,比原生的ajax多了两种
    text,json,javascript,xml,html
    如果返回值是json的话不需要使用JSON.parse(XX)转换
    可以直接使用let 属性值 = 对象.属性名 来拿取
    因为这里规定了返回值类型，所以在servlet中的response
    不需要设置返回的数据类型
    */
    dataType:'text'，
    //6.服务器无误后返回的结果
    /*
    	success:function(data){}
    	使用ES6新特性可以简化为下边的写法
    */
    success(data){
    
	}
	//7.服务器出错执行的回调函数
	error(err){console.log(err.status)}
})

$.get()

$.get('check',{name:$jq_input.val()},function(data){
    if(data=='bingo'){
        $jq_input.addClass('myinput')
        $jq_sp.css('color','red').html('<img src="image/wrong.png" />用户姓名已经被占用')
        $jq_sub.attr('disabled',true)
        return
    }
    $jq_input.removeClass()
    $jq_sp.css('color','green').html('<img src="image/right.png" />用户姓名可以使用')
    $jq_sub.attr('disabled',false)
})