第十二章 Jquery
Write Less,Do More
简介
如果想要在页面使用jQuery类库,直接引入类库文件即可,有限引入Jquery类库在书写自己的js
1.xx版本兼容老旧浏览器 ie 6 7 8等
2.xx 不兼容老旧浏览器
3.xx 为最新版本 与LayUI兼容性较差
带有min后缀的是迷你版,类利于jre 在运行阶段使用,体积只有正常版本的四分之一。
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()
获取元素之后可以使用此方法给元素设置样式,有以下两种格式
- css({样式名1:样式值1,样式名2:样式值2,样式名N:样式值N})
注意此种书写格式中样式名使用js的书写方式不能出现-,必须遵循驼峰命名
例:background-color ===> backgroundColor
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')
注意
.html() .text() 以上两个方法如果不在括号中填写内容,则表示拿取元素中的超文本元素和文本元素,注意在.text()中只拿取文本,不包含标签,如果拿取的元素内部存在多个文本,则合并为一个。
序号 | 选择器 | 描述 |
---|---|---|
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元素(节点)是同一种元素吗?如果不是?为什么?两者如何转换?
不是同一种元素,两者无法使用对方的方法 函数 属性 等。
Jquery ==》 Dom
$(‘#span’)[0],
$(‘#span’).get(0)
Dom ==》 jQuery
$(nodespan)
2.js中的onload与jquery中的ready()的不同
1)onload表示全文所有要素都要加载无误并且加载成功, 而ready()仅仅需要结构加载成功即可
2)onload全文只能加载一次,而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() | 淡出 |
以上几个动画方法都支持回调函数的书写
方法名(动画时间,function(){ 执行完动画之后的回调函数 }) 动画时间:为ms数或者设置速度常量 'slow' 'noram' 'fast' sel.fadeIn(3000,function(){ 要执行的回调函数 })
破坏性操作:
如果一个方法在执行之后会改变当前的元素列表,那么我们称这个方法为破坏性操作
回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。 如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数–‘add’, ‘andSelf’,‘children’, ‘filter’, ‘find’, ‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’,‘parents’, ‘prev’, ‘prevAll’, ‘siblings’ and ‘slice’–再加上 Manipulation中的 ‘clone’。
<!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的异步请求
使用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(url,data,callback,type)
url:表示要提交到的地址
data:表示要传递的值,如不需要传值则可以不写
格式:{ k:v,k2:v2}
callback:回调函数,出现错误无法控制,
type:返回值为以下五种
text,script,html,xml,json
$.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)
})
- $.post()
用法与$.get()完全一致,只是方法名字变成个 post()
书写完成后,一定要重新部署项目,某则会405