jQuery库（1）
2024-05-16 01:50:06
一、jQuery库
1、什么是jQuery库
是JavaScript中的库。
2、设计理念
“写得少，做的多”
3、使用方法
3.1、在页面中导入jQuery.js文件
<script type="text/javascript" src="./jquery-3.4.1.js"></script>3.2、在script标签当中编写jquery程序
‘$’:是jQuery的全局对象，代表的是jQuery
//简写写法：
'$(function(){ //jquery的入口函数jquery})'
//完整写法：$(documen).ready(function(){jquery})
4、jQuery的基本选择器
4.1、id选择器：#id
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><button id="hide">隐藏</button> <br><p id="p1">西安</p><script>$(function(){$('#hide').bind('click',function(){alert('你单击了按钮')})//修改p1的颜色$('#p1').css('backgroundColor','red')}) </script>
</body>
</html>
4.2、类选择器：.class
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><p class="pt">陕西</p><p class="pt">陕西示范</p> <script>$(function(){//修改class为pt的元素的文本颜色$('.pt').css('color','blue')}) </script>
</body>
</html>
4.3、标签名选择器：标签名
<p id="p1">西安</p> -<p class="pt">陕西</p><p class="pt">陕西示范</p> <!-- <hr> <div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> --><script>$(function(){//将所有p标签的文本的字号设置为25$('p').css('fontSize','25px')}) </script>
5、jQuery的基本过滤选择器
5.1、first：选择第一个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>
<!-- <button id="hide">隐藏</button> <br> --><p>西安</p> -<p >陕西</p><p >陕西示范</p> <script>$(function(){//将第一个p标签的背景色改为蓝色$('p:first').css('backgroundColor','blue')})</script>
</body>
</html>
5.2、last ；选择最后一个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><p>西安</p> <p >陕西</p><p>陕西示范</p> <script>$(function(){//将最后一个p标签字体颜色改为红色$('p:last').css('color','red')})</script>
</body>
</html>
5.3、not(selector):不是指定的某个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><p>西安</p> <p class="pt">陕西</p><p class="pt">陕西示范</p> <script>$(function(){//将class属性不是pt属性的元素的字号变小$('p:not(.pt)').css('fontSize','12px')}) </script>
</body>
</html>
5.4、even：索引为偶数的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> <script>$(function(){ //让索引为偶数的div的字体颜色为hong色$('div:even').css('color','red')}) </script>
</body>
</html>
5.5、odd：索引为奇数的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> <script>$(function(){ //让索引为奇数的div的字体颜色为蓝色$('div:odd').css('color','red')}) </script>
</body>
</html>
5.6、eq（index）：索引等于index的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> <script>$(function(){ //让索引等于2的div的字号为18px$('div:eq(2)').css('fontSize','30px') }) </script>
</body>
</html>
5.7、gt(index):索引大于index的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> <script>$(function(){ //让索引等于2的div的字号为18px$('div:gt(2)').css('fontSize','30px') }) </script>
</body>
</html>
5.8、lt(index):索引小于index的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body><div>水浒</div><div>三国</div><div>西游</div><div>红楼</div> <script>$(function(){ //让索引等于2的div的字号为18px$('div:lt(2)').css('fontSize','30px') }) </script>
</body>
</html>
6、属性选择器
6.1、[attribute]:拥有给定属性的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//选择将具有max属性的input文本设置为红色$('input[max]').css('color','red')})</script>
</body>
</html>
6.2、[attribute=value]:选取指定属性的值为value的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//将name属性值为username的inout的文本设置为蓝色$('input[name=username]').css('color','blue')})</script>
</body>
</html>
6.3、[attribute!=value]:选取指定属性的值为不等于value的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//将name属性值不为username的input的文本设置为粉色//$('input[name!=username]').css('color','pink')})</script>
</body>
</html>
6.4、[attribute^=value]：选取指定属性的值是以value开头的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//将name属性值开头为user开头的属性设置为25px$('input[name^=user]').css('fontSize','25px')})</script>
</body>
</html>
6.5、[attribute$=value]：选取指定属性的值是以value结尾的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//将name属性值开头为ress结尾的属性设置为30px$('input[name$=ress]').css('fontSize','30px')})</script>
</body>
</html>
6.6、[attribute*=value]：选取指定属性的值是含有value的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.js"></script>
</head>
<body>用户名：<input type="text" name="username"><br><br>密 码：<input type="password" ><br><br>年 龄：<input type="number" max="120" min="0"><br><br>地 址：<input type="text" name="address"><br><br>手机号：<input type="phone" name="userphone" id=""><br><br>QQ号：<input type="text" name="qqress" id=""><script>$(function(){//将type属性值中含有'word'的input的属性设置为40px$('input[type*=word]').css('fontSize','40px')})</script>
</body>
</html>
二、JQuery中操作元素的属性
1、读取属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p id="p1" name="pt">大唐芙蓉园</p><script>$(function(){//读取属性的值let t = $('#p1').attr('name') //获取id为p1的元素的name属性值console.log(t) })</script>
</body>
</html>
2、修改属性的值
2.1、attr(key,value) 参数key表示属性名，value表示属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><button id="btn">显示图片</button><!-- <button id="del">删除图片</button> --><br><br><img src="" alt=""><script>$(function(){2、修改属性的值$('#btn').bind('click',function(){$('img').attr('src','./img/car.jpg') //给按钮btn绑定click事件}) })</script>
</body>
</html>
2.2、attr({属性1；属性值，属性2；属性值2})：采用key：value方式设置属性值，可以设置多个属性，属性名需要用引号括起来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><button id="btn">显示图片</button><!-- <button id="del">删除图片</button> --><br><br><img src="" alt=""><script>$(function(){2、修改属性的值$('#btn').bind('click',function(){$('img').attr({src:'./img/car.jpg',width:'960px',heigth:'560px'})}) })</script>
</body>
</html>
2.3、attr(key,fn) 参数key表示属性名，fn是回调函数，在函数中设置属性的值。属性名需要引号括起来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><button id="btn">显示图片</button><!-- <button id="del">删除图片</button> --><br><br><img src="" alt=""><script>$(function(){2、修改属性的值$('#btn').bind('click',function(){$('img').attr('src',function(){return './img/car.jpg'})}) })</script>
</body>
</html>
3、删除元素： removeAttr(属性名)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><button id="btn">显示图片</button><!-- <button id="del">删除图片</button> --><br><br><img src="" alt=""><script>$(function(){//2、修改属性的值$('#btn').bind('click',function(){$('img').attr('src',function(){return './img/car.jpg'})//删除图片$('#del').bind('click',function(){$('img').removeAttr('src') //将img的照片删除})}) })</script>
</body>
</html>
显示照片：
删除照片：
三、jQuery操作元素的样式
1、通过class属性修改
1.1、给元素添加指定的类名(class)
addClass(‘类名’)
1.2、删除元素的class属性
removeClase(类名)
举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<style>.ok{color: green;}.fail{color: red;}
</style>
<body>用户名：<input type="text" id="username"><span id="sp"></span><br><br>密 码: <input type="password" id="pwd"><br><br><button id="btn">登录</button><script>$(function(){$('#btn').bind('click',function(){if($('#username').val()==='abc'){$('#sp').html('用户名合法')$('#sp').removeClass('fail')$('#sp').addClass('ok')}else{$('#sp').html('用户名错误')$('#sp').removeClass('ok')$('#sp').addClass('fail')}})})</script>
</body>
</html>
2、通过css函数修改
2.1、获取css样式属性值
css(name) ；参数name表示样式属性名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p style="color: red;">西安</p><p id="p2">北京</p><script>$(function(){let k = $('p').css('color')//获取css样式属性color的值console.log(k)})</script>
</body>
</html>
2.2、设置单个css样式属性
css(key,value) 参数key表示样式属性名，参数value表示样式属性值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p style="color: red;">西安</p><p id="p2">北京</p><script>$(function(){$('#p2').css('color','blue') //设置id为p2的标签文本色为蓝色
})</script>
</body>
</html>
2.3、设置多个css样式
css({样式名：值，样式名2：值2})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p style="color: red;">西安</p><p id="p2">北京</p><script>$(function(){$('#p2').css({'color':'blue','fontSize':'30px'})
})</script>
</body>
</html>
3、获取或设置页面元素的(标签)的宽度和高度
3.1、获取宽度在这里插入代码片
width()
3.2、设置宽度
width(val) //参数val表示宽度值
3.3、获取宽度
height()
3.4、设置高度
heigt(val) //参数val表示高度值
4、操作标签的HTML代码(就是操作标签的innerHTML属性值)
4.1、获取html的值
html()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p style="color: red;">西安</p><p id="p2">北京</p><script>$(function(){let str = $('#p2').html()console.log(str) })</script>
</body>
</html>
4.2、设置html的值
html(val)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body><p style="color: red;">西安</p><p id="p2">北京</p><script>$(function(){$('#p2').html('华北')})</script>
</body>
</html>
5、操作input的值(value属性)
5.1、获取Value的值
val()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>用户名: <input type="text"><input type="button" value="确定" ><script>$(function(){$('input[type=button]').bind('click',function(){alert($('input[type=text]').val())})})</script>
</body>
</html>
5.2、设置value值
val(Value)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>用户名: <input type="text"><input type="button" value="确定" ><script>$(function(){$('input[type=button]').bind('click',function(){$('input[type=text]').val('西安')})})</script>
</body>
</html>
在点击确定按钮后，用户名的输入框就会显示出提前设置好的value值。在这里就是“西安”。
jQuery库（1）相关推荐
- 判断jQuery库是否被正确引入
监测jQuery库是否正确引入 <script>if(typeof(jQuery)=="undefined"){alert("jQuery is not im ...
- 使用谷歌jquery库文件的理由
使用谷歌jquery库文件的理由 最近看到,那些引用jquery的文件那些网站,好多是使用谷歌的库:像这样的<script type="text/javascript"src ...
- 可想实现一个自己的简单jQuery库？(五)
Lesson-4 这个版本我们要增加一个用的非常多的方法! 那就是each! 我们知道each不仅能遍历数组,还能遍历对象. 首先我们需要一个对数组进行验证的方法 function isArray(o ...
- (0004) H5开发之导入JQuery库以及使用。
1.jquery.min.js与jquery.js有什么区别? min是压缩版,去除了注释和空格,主要是生产环境中使用,不带min是带有注释和空格的,方便阅读源码. 2.哪个版本的jQuery兼容性最 ...
- Aptana 安装jQuery库 智能提示
1.安装Aptana 本人是2.0.5版本的 2.在首页My Studio中 选Plugins 选Ajax 找到Jquery 点Get it 3.安装jquery库后,需要增加jQuey的智能提示 ...
- WordPress制作插件中使用wp_enqueue_script('jquery')库不起作用解决方法
这个应该不是什么新信息,但我却是现在才搞清楚. 今天又是在wordpress调用jquery,情况还是如此.无意中打开wordpress中jquery.js,然后对比code.jquery.com中的 ...
- jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTM ...
- 通过CDN引用jQuery库+jQuery的使用+网页实现计算器的功能
jQuery是什么?有什么用? jQuery是javascript库,其实就是一堆的js函数,方便我们来调用,提高我们的开发效率 免费开源,支持主流浏览器,简化选取网页元素的语法,简易的读取设置元素的 ...
- body区域怎么传一个数组_自己轻松写一个jQuery库
jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的 ...
- 第四章 前端开发——JQuery库
第四章 前端开发学习--JQuery库 一.jQuery基础 二.使用选择器获取元素 三.使用筛选器获取元素 四.DOM操作 五.属性和样式操作 六.jQuery事件机制 七.动画效果 八.工具和其他 ...
最新文章
- APUE(第八章)进程控制
- “新浪朋友”首先要满足朋友需求
- 算一串数字的entropy_2020520｜一个万年一遇有爱的日子，网友：就是一串数字
- 人工智能时代，怎样高效学习AI技术、聚焦AI行业趋势？
- python3.7安装教程linux_linux系统安装Python 3.7.x
- 使用 MTR 诊断网络问题
- python动态爬取不一样的url_什么情况？python这次居然被web scraper比下去了
- Obj文件和Bin文件
- arcgis伪节点检查_arcgis建立拓扑分析(检验矢量图)
- 项目开发总结报告（GB8567——88）
- Myeclipse学习总结（8）——Eclipse实用操作
- 蓝桥杯第六届C语言B——积分之谜
- IOS 定义手势监听器详解，利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
- W3School-CSS 字体(font)实例
- Android入门之login设计
- 用python实现人脸识别毕设_用Python实现一个简单的人脸识别，原来我和这个明星如此相似...
- c语言编写坐标三角形面积,用三角形的边长计算三角形的面积.用C语言编写.
- Prometheus 容器化部署，配合Grafan画图工具监控节点
- 人工智能学python还是c_考虑到未来人工智能的发展，应该学习C++/C语言还是Python语言？...
- mongodb 服务器时区设置_关于MongoDB时区问题