WEB--jQuery基础
发布日期：2021-05-14 12:20:44
浏览次数：13
分类：原创文章
本文共 5964 字，大约阅读时间需要 19 分钟。
文章目录
简介和使用
- 简介
jQuery: 目前最广泛使用的一个js库，极大的简化了js编程
官方文档：https://jquery.com/
在线手册：https://www.runoob.com/manual/jquery/
- 引用：下载到本地
下载地址：https://code.jquery.com/，点击对应版本的压缩文件(minified)并将弹框代码中的url粘贴到网页打开，在网页保存后放在js目录位置即可被引用
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>- 引用：网络引用
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>jQuery选择器
- 基本选择器
// id选择器$("#a")// 类选择器$(".box1")// 属性选择器$("div[name=test]")// 层级选择器$("body div")<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> window.onload = function(){ // id选择器 $("#a").css({ background:'blue', height: '200px'}) // 类选择器 $(".box1").css({ background:'blue', height: '400px', fontSize: '50px'}) // 属性选择器 $("div[name=test]").css({ background:'blue', height: '800px', fontSize: '50px'}) // 层级选择器 $("body div").css({ background:'blue', width: '800px', fontSize: '50px'}) } </script></head><body> <div id="a" class="box1" name="test", style="width: 100%; height: 100px; background-color:red;">jquery-1</div> </body></html>- 选择同胞和父辈元素
// 选择div元素前紧挨的同辈元素$("div").prev();// 选择div元素之前所有的同辈元素$("div").prevAll();// 选择div元素后面紧挨的同辈元素$("div").next();// 选择div元素后面所有的同辈元素$("div").nextAll();- 选择过滤
// 选择div元素后代中所有的p标签$("div").has('p');// 选择div元素后代中class不等于p的元素$("div").not('.p');// 选择div元素后代中class等于p的元素$("div").filter('.p');// 选择第3个div$("div").eq(2);// 选择div的所有同辈节点$("div")..siblings();- 获取元素的索引
index()方法获取元素的索引
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($('li').index(document.getElementById('baz'))); // 2, 传递一个DOM对象 alert($('li').index($('#baz'))); // 2, 传递一个jQuery对象 alert($('li').index($('li:gt(0)'))); // 1, 传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 alert($('#baz').index('li')); // 2, 传递一个选择器，返回#baz在所有li中的索引位置 alert($('#baz').index()); // 2, 不传递参数，返回这个元素在同辈中的索引位置}); </script></head><body> <ul id="u"> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> </body></html>- 等待元素加载完成
<script type="text/javascript"> // js中window.onload window.onload = function(){ }; // jQuery中等待页面加载完成 $(document).ready(function(){ });</script>jQuery操作样式
- 获取元素样式
$('#box').css('width')$('#box').css('color')- 修改元素样式
$('#box').css('width', '100%');$('#box').css('height', '300px');$('#box').css({ 'width': '100px', 'background': 'red'});- 添加或移除元素样式
// 添加hide属性$('#box').addClass('hide'); // 添加hide属性$('#box').removeClass('box1'); // 移除box1属性$('#box').toggleClass('box5'); // 重复切换样式jQuery事件
click()： // 鼠标点击
change()： // 元素改变
mouseover()： // 鼠标进入子元素触发
mouseout() ： // 鼠标离开子元素触发
mouseenter()： // 鼠标进入子元素不触发
mouseleave()： // 鼠标离开子元素不触发
hover()： // 同时为mouseenter()和mouseleave()指定处理事件
ready() ： // 等待DOM加载完成
resize()： // 浏览器窗口大小改变触发
scroll()： // 滚动条位置发生改变触发
submit()： // 提交表单触发
- 绑定click事件
<script type="text/javascript"> $(document).ready(function(){ $('.box').click(function(){ $(this).removeClass('m') $(this).addClass('n') })}); </script>jQuery操作属性
// 设置或返回被选元素的属性值$('.box').attr('class') // 设置或返回被选元素的属性值$('.box').removeAttr('id') // 删除属性<script type="text/javascript"> $(document).ready(function(){ var res = $('.box').attr('class') // 设置被选元素class属性对应的属性值 $('.box').attr({ name: "box", id: "box1" }) // 返回被选元素的属性和属性值 $('.box').removeAttr('id') // 删除属性名为id的属性}); </script>jQuery操作元素
- 获取文本内容
.text(): 设置或返回所选元素的文本内容
.html(): 设置或返回所选元素的内容（包括html标签)
.val(): 设置或返回表单字段的值
<div class="box m" name='qwe'> <span>测试</span> <input value="pwd"></div><script type="text/javascript"> $(document).ready(function(){ var res = $('.box').text() // 测试 var res = $('.box').html() // <span>测试</span> var res = $('input').val() // pwd console.log(res)}); </script><!---判断字段长度并弹出提示--><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script> <link rel="stylesheet" type="text/css" href="../static/css/demo.css"> <script type="text/javascript"> $(document).ready(function(){ $('#btn').click(function(){ var name = $('#username').val(); console.log(name); if (name.length < 8 || name.length > 12) { alert('长度仅支持6-12位！') } }) }); </script></head><body> <div class="box1 m"> <input type='text' id='username' class="input1 n" value=""> <input type='button' id='btn'class="button1 n" value=""> </div></body>- 添加新的HTML内容
.after(): 在被选元素之后插入内容
.before(): 在被选元素之前插入内容
.append(): 在被选元素内部末尾插入内容
.prepend(): 在在被选元素内部开头插入内容
// 添加砸input标签的外部之后和之前var input1 = $('.input1')input1.after('<span>添加在标签外部之后</span>')input1.before('<span>添加在标签外部开头</span>')// 添加砸div标签的内部的开头和结尾var box2 = $('.box2')box2.append('<span>添加在标签内部末尾</span>')box2.prepend('<span>添加在标签内部开头</span>')- 删除元素/内容
.remove(): 删除被选元素及其子元素
.empty(): 置空被选元素
// 递归删除box1标签var box1 = $('.box1')box1.remove()// 删除box1标签内部元素var box2 = $('.box2')box2.empty()jQuery效果函数
.hide(): 隐藏被选元素
.show(): 显示被选元素
.stop(): 停止在被选元素上运行动画
.toggle(): 对被选元素进行显示和隐藏的切换
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2025年04月26日 07时10分51秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
大数据在不同领域的应用
2021-05-14
页面置换算法
2021-05-14
推荐系统资料
2021-05-14
文件系统的层次结构
2021-05-14
减少磁盘延迟时间的方法
2021-05-14
磁盘的管理
2021-05-14
FCFS、SJF、HRRN调度算法
2021-05-14
vue(渐进式前端框架)
2021-05-14
权值初始化和与损失函数
2021-05-14
案例讨论
2021-05-14
传输层基本功能
2021-05-14
最长公共子序列
2021-05-14
分治算法的一般描述和分析方法
2021-05-14
问题的计算复杂度：排序问题
2021-05-14
货郎问题与计算复杂性
2021-05-14
算法的伪码表示
2021-05-14
函数的渐近的界
2021-05-14
有关函数渐近的界的定理
2021-05-14
递推方程与算法分析
2021-05-14
迭代法求解递推方程
2021-05-14
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461218400 位访客