2. it
  3. day49 前端之 jQery

day49 前端之 jQery

mac2022-06-30  35

JQuery

介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

jQuery就类似于python的模块,帮你封装了一对复杂的操作暴露给你一些简易的接口

前端的模块 叫'类库'

JQuery对象

在JQuery库中，可以通过本身自带的方法获取页面DOM 元素的对象叫做JQuery对象。对象用var开头定义。

$("#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]//jQuery对象转成DOM对象

使用:

$("#i1").html();//jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM对象使用DOM的方法

JQuery的基本语法结构

$(选择器).action(属性)

例子:将111111先用原生的js语法把颜色变成红色,再用jquery将他变成蓝色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <p>111111</p> </body> </html> View Code

..

 

 

 

基本选择器

标签选择器
$('tagname')
id选择器
$('#id')
class选择器
$('.className')
配合使用
$('div.c1')
所有元素选择器
$('*')
组合选择器
$('#id, .className, tagName')
层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

 

 

练习:模态框,使用jQuery实现弹出和隐藏功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> <style> .cover { position:fixed ; top: 0; left: 0; bottom: 0; right: 0; background-color: darkgray; z-index: 9; } .model { /*固定*/ position: fixed; top: 50%; left: 50%; height: 200px; width: 400px; background-color: darkgray; /**/ z-index: 10; margin-top: -100px; margin-left: -200px; } .hidden { display:none ; } </style> </head> <body> <div class="c1"> 我是最下面的</div> <button class="c2">按钮</button> <div class="cover hidden"></div> <div class="model hidden"> <p> username:<input type="text"></p> <p> password:<input type="text"></p> <button class="cancel">取消</button> </div> <script> var c1Ele = $('.c2')[0]; c1Ele.onclick = function () { // 将中间和白框的hidden 类属性移除 $('.cover').removeClass('hidden'); $('.model').removeClass('hidden') }; var cancelEle = $('.cancel')[0]; cancelEle.onclick = function () { // 添加 $('.cover').addClass('hidden'); $('.model').addClass('hidden') } </script> </body> </html> 模态框

属性选择器

[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于

代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <div class="c1">div</div> <p username="user">p</p> <span class="c1">span</span> </body> </html> View Code

表单筛选器：

:text :password :file :radio :checkbox :submit :reset :button

代码

从bootcdn中引用script链接,或者从本地拷一个

压缩链接:<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <!--引用jQuery--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <!--参数:action 控制from表单信息的提交位置,不写默认当前地址--> <!--method 默认为get--> <!--enctype 默认为application/x-www-form-urlencoded 传普通键值 改为multipart/form-data 传文件 --> <!--novalidate 告诉浏览器不要做额外的校验--> <form action="" > <p><label for="d1">username:<input type="text" id="d1"></label></p> <p><label for="d2">password:<input type="text" id="d2"></label></p> <input type="submit"> <br> <!--单选--> <select name="" id=""> <option value="" selected>1111</option> <option value="">2222</option> <option value="">3333</option> </select> <br> <!--复选--> <input type="checkbox" name="like" checked>兽 <input type="checkbox" name="like">虫 <input type="checkbox" name="like" checked>鱼 <input type="checkbox" name="like">鸟 </form> </body> </html> View Code

 

 

 

 表单对象属性

:enabled :disabled :checked :selected

例子:

 

 

 

 

<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option

筛选器方法

代码

<!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> <span>span1</span> <span>span2</span> <div id="d1">div <span>div>span</span> <p class="c1">div>p <span class="c2">div>p>span</span> </p> <span id="d2">div>span</span> </div> <span>span1</span> <span>span2</span> <span id="d3"></span> </body> </html> View Code

下一个元素：

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")

上一个元素：

$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")

父亲元素：

$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

 

 

儿子和兄弟元素：

$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们

注意:对象与对象的转换

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1") // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充

.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素

练习:左侧菜单

 

转载于:https://www.cnblogs.com/komorebi/p/11499438.html

最新回复(0)