目录
JQuery介绍
- JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。
- JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情
JQuery优势
- 一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。
- 丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。
- 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作。后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。JQuery基本兼容了现在主流的浏览器。
- 插件扩展开发。JQuery有丰富的第三方插件，如：树形的菜单、日期控件等等并且用JQuery插件可以做出的效果很炫酷，并且可以根据自己需要去改写和封装插件，简单实用。
JQuery版本
维护IE678是一件很麻烦的事情，所有一般我们会加载一个CSS和JS单独处理。
JQuery对象
JQuery对象就是通过JQuery包装DOM对象后产生的对象。如果一个对象是JQuery对象，那么可以使用JQuery里面的方法，
如：$(#d1).html():就是获取id值为d1的元素的html的元素的代码
html()是JQuery里面的方法
相当于document.getElementById('d1').innerHTML；
JQuery对象包装DOM对象后产生的,但是JQuery对象无法使用DOM对象里的方法，DOM对象也不能使用JQuery对象的的方法
声明JQuery对象的语法
声明变量的时候在前面加上$符号
var $variable = JQuery对象
var variable = DOM对象
$variable[0]对象转成DOM对象
例如：
$("#d1").html; JQuery对象可以使用JQuery对象的方法
$("#d1")[0].innerHTML DOM对象使用DOM对象的方法
这里把JQuery对象通过[0]的方式转为DOM对象
JQuery基本的语法
$(selector).action()
JQuery把文件导入模板中
在pycharm中依次操作file—>settings—>editor—>file and code templates—>在HTML File中的title标签下面添加JQuery的链接<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
在引入JQuery文件的时候，一般使用min的js文件，它是把原生的js文件压缩成英文的代码
注意：这里导入到模板中的链接必须在联网的情况下才能使用
查找标签
基本选择器
-
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 最后一个
:q(index) 索引值于指定值的那个元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引为奇数的元素，从0开始计数
:get(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找
$('div span:first')
$('span') 查找所有的span标签
$('div span:first') 查找第一个span
var $spanEle = $('span‘)[2] 这里一定要区分是JQuery对象还是标签(js对象),这里是DOM对象没有转换为JQuery，所以会报错
筛选器的方法
$($spanEle).next() 查找span标签内的下一个span标签
$($spanEle).nextAll() 查找多有的span对象
$($spanEle).nextUtil('#d2')这里是不包含
$spanEle.prev() 查一个span标签
$spanEle.prevAll() 同级别的
$spanEle.prevUntil('#d1') 查找不包含d1的span标签
$('u1 li:even')和$('u1 li:odd')的结果是一样的
例子：
$("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] 属性不等于
$('div span:not(".c1")')
$('div span:has(".c1")')
筛后代元素是否有对应的属性
截图搜集
父亲元素
$('#d2').parent()
查到的是div#d1
$('#d2').parent().parent()
查到的是body
$('#d2').parent().parent().parent()
查到的是html文档流
$('#d2').parent().parent().parent().parent()
查到的是document文本 (最高能查到的层级)
$('#d2').parent().parent().parent().parent().parent()
这里就是prevObject对象了
$('#d2').parents()查找当前元素所有元素的父元素
$('#d2').parentsUntil('html')查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素
$('#d1').children()儿子
$('#d1').siblings()上下都算，兄弟
$('div').find('span')后代，搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
$('div span').first()
$('div span:first')
这两者是完全等价的
$('div').removeClass('bg_red')移除
$('div').addClass('bg_red')添加
$('div').hasClass('bg_red')是否存在
$('div').toggleClass('bg_red')切换，有就移除，没有就添加(第一次)
显示的结果div.c1.bg_green
$('div').toggleClass('bg_red')切换(第二次，第一次切换后的)
显示的结果div.c1.bg_green.bg_red,
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
截图搜集
$('div').text()
会显示树形状的节点标签
$('div').html()
会显示所有的元素，包括标签、空格
$('div').text('<h1>今天有点冷啊</h1>')给标签设置值,不会显示添加的标签
$('div').html('<h1>今天有点冷啊</h1>')给标签设置值，<h1>标签会起作用。因为text是一个文本类型的，而html是文档流的
$('input').val() 不加参数就是获取值
$('input').val('你今天...') 加了参数就是设值
$('p').attr('id')获取id参数的标签
$('p').attr('username','json') 设置一个值
$('p').attr({'username':'json',"hobby":'study'})
设置多个值的时候以键值对的形式，设置
$('p').removeAttr('hobby') 移除
$('input').first().prop('checked'.'checked')设置$('input').first().prop('checked',false)移除
这里的false代表为设置input的内容为空，相当于移除
$('body').append(Ele)
body中添加
$(pEle).appendTo('body')
添加到body中
两者顺序不一样，但是效果是一样的
例子：
$(":checkbox") 找到所有的checkbox
例子input
$('[type="text"]') 找到text类型的标签
$('[type="password"]') 找到password的input标签
简单的写法
$(':text')
$(':password')
$(':file')
$(':button')
$(':checked') checked会将select也查到
操作标签
样式操作
样式类
addClass();添加指定的css类名
removeClass();移除指定的css类名
hasClass();判断样式不存在
toggleClass();切换css类名，如果有就移除，没有就添加
例子：开关灯和模态框
CSS
css("color","red"); DOM操作：tag.style.color = "red"
例子：
$("p").css("color","red"); 将所有p标签的字体设置成红色
文本操作
HTML代码
html() 取得第一个匹配元素的html内容
html(val) 设置所有匹配元素的html内容
文本值
text() 取得所有匹配元素的内容
text(val) 设置所有匹配元素的内容
值
val() 取得第一个匹配元素的当前值
val(val) 设置所有匹配元素的值
val([val1,val2]) 设置多选checkbox(复选框)、多选select的值
设置值
$("[name='hobby']").value(['basketball','football'])
$("#s1").value(["1","2"])
例子：
获取被选中的checkbox或radio(单选按钮)的值
<label for="c1">女</label>
<input name='gender' id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
会在页面上渲染出一个文本框，输入信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
<a href="">div>p>a</a>
</p>
</div>
<input type="text">
</body>
</html>
文档处理
添加到指定元素内部的后面
$(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的后面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素
empty()// 删除匹配的元素集合中所有的子节点
替换
replaceWith() 替换新元素
replaceAll() 替换所有的元素
把第一个<p>元素替换为新的文本
$("button").click(function)(){
$("p:first").replaceWith("hello");
});
属性操作
用于ID等或自定义属性
attr(attrName) 返回第一个匹配元素的属性值
attr(attrName,attrValue) 为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop 获取属性
removeProp 移除属性
注意：在1.x和2.x版本中使用JQuery会出现bug，在3.x中没有这个问题，为了兼容，处理复选框(checkbox和radio)时一般使用特定的prop(),不使用attr
prop和attr的区别
attr全称是attribute（属性）
prop全称是property（属性）
虽然都是属性，但他们所指的属性并不相同，
attr指的是THML树标签的属性
prop指的是DOM对象的属性
可以认为attr是显式的
prop是隐式的
例子：
<input type="checkbox" id="d1" value="1">
针对上面的代码
$("#d1").attr("checked") //undefined
$("#d1").prop("checked") //false
总结：attr获取一个标签内没有的东西会得到undefined，prop获取的是这个DOM对象的属性，因此checked为false
<input type="checked" checked id="d1" value="1">
再次执行
$("#d1").attr("checked") //checked
$("#d1").prop("checked") //true
总结：证明了attr是局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没有选中返回false
自定义的情况下
<input type="checkbox" checked id ="d1" value="1" me="自定义的属性">
执行代码：
$("#d1").attr("me") //自定义属性
$("#d1").prop("me") //undefined
prop不支持获取标签的自定义的属性
总结：对于标签上有的属性和自定义属性都用attr
对于返回布尔值的比如：checkbox、radio和option的是否被选中都用prop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">我是一只小小鸟</p>
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox" checked>rap
</body>
</html>
克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
height: 50px;
100px;
background-color: red;
border: 3px solid darkgray;
color: white;
}
</style>
</head>
<body>
<button>屠龙宝刀，点击就送</button>
<script>
// var btnEle = $('button')[0];
// btnEle.onclick = function () {
// // $(this).clone().insertAfter(this)
// // clone()默认是不克隆事件
// $(this).clone(true).insertAfter(this)
// }
$("button").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
位置操作
offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档(document)的当前位置
尺寸
height()
width()
innerHight()
innerWidth()
outerHight()
outWidth()
添加一个p标签
通过设置它的边框属性来达到改变高宽，内高内宽，外高外宽
<style>
p {
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
border: 3px solid red;
}
</style>
事件
常用的事件
click(function(){...})
hover(function(){...}) 鼠标悬浮上去的时候触发
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件的绑定
.on(events[,selector],function(){})
events:事件
selector:选择器(可选的)
function:事件处理函数
移除事件：
.off(events[,selector][function(){}])
off()方法移除用.on()绑定的事件处理程序
events:事件
selector:选择器(可选的)
function:事件处理函数
阻止后续事件执行
return false; //常见阻止表单提交等
$('input').click(function (e) {
$(this).next().text('你追我~~~');
// 如何阻止标签后续的事件
// 方式1
// return false
// 方式2
// e.preventDefault()
})
一般使用方式一
input监听默认的事件
<script>
$('input').on('input',function () {
// 获取用户输入的内容
console.log($(this).val())
})
1) $('input').on('focus',function () {
// 获取用户输入的内容
// console.log($(this).val())
alert(123) 提示框提示信息
})
2) $('input').focus(function () {
alert(123)
//获取用户输入的内容
})
</script>
总结：1)2)的最终效果是一样的
总结：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种JQuery中定义的事件就不能用.on方法来绑定了
想使用委托的方式绑定hover事件处理函数，下面分两步绑定事件
$('ul').on('mouseenter','li',function(){//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('nouseleave','li',function(){//绑定鼠标划出事件
$(this).removeClass('hover');
})；
阻止事件冒泡
<script>
$('div').click(function (e) {
alert('div')
});
$('p').click(function (e) {
e.stopPropagation();
alert('p');
});
$('span').click(function (e) {
alert('span');
e.stopPropagation() // 阻止事件冒泡
});
如果e只添加到span事件中，其他不添加，只显示span，事件p和事件div被阻止了
如果e只添加到p事件中，会显示span，然后是p
总结：
冒泡就相当于从池塘的下面往水面上冒气泡
e添加到哪里就 就只显示该事件
垃圾回收机制
-
引用计数
当对象的引用计数为0时，就会触发垃圾回收机制
-
标记清除
针对循环问题的回收机制，作用的对象是容器类型的对象，比如：list
-
分代回收
分代回收是建立在标记清除的基础上的一种辅助回收容器对象的GC机制