目录
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; width: 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机制