jQuery

最新推荐文章于 2024-08-19 03:35:01 发布
最新推荐文章于 2024-08-19 03:35:01 发布
阅读量284 收藏
点赞数
分类专栏： html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45590490/article/details/109025933
版权
jQuery 是一个 JavaScript 库，简化了 DOM 操作、事件处理、动画和Ajax交互。本文详细介绍了 jQuery 的选择器，包括 id、class、标签、组合、层级等，以及属性操作、筛选器、CSS、事件等方面，帮助开发者更高效地编写代码。
摘要由CSDN通过智能技术生成

jQuery是一个javascript库，核心理念是write less,do more(写得更少,做得更多)，他内部帮我们把几乎所有功能都做了封装，相比上一节基于DOM、BOM操作会更加简单。

前戏

1. 快速应用
<script src="../jquery-3.5.1.js"></script>
2. DOM对象和jQuery对象

DOM对象和jQuery对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。

jquery对象[0]   => Dom对象
Dom对象         => $(Dom对象)

1.选择器

选择器，直接找到某个或者某类标签

1.1 id 选择器
$('#id')
1.2 class 选择器
<div class='c1'></div>
$(".c1")
1.3 标签选择器

html代码：

	<div id='i10' class='c1'>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'> </div>
	</div>
    <script src="../jquery-3.5.1.js"></script>

jQuery代码：

$('a');   //标签选择器，输出所有的a标签
1.4 组合选择器

jQuery代码：

$('a,.c2,#i10');

输出：

jQuery.fn.init(5) [div#i10.c1, a, a, a, div.c2, prevObject: jQuery.fn.init(1)]
1.5 层级选择器

html代码：

    <div id='i10' class='c1'>
        <div>
            <a>hello</a>
        </div>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'> </div>
	</div>
    <script src="../jquery-3.5.1.js"></script>

jQuery代码：

$('#i10 a');   //子子孙孙中查找

//结果：
jQuery.fn.init(3) [a, a, a, prevObject: jQuery.fn.init(1)]

$('#i10>a');   //儿子中查找
//结果：
jQuery.fn.init(2) [a, a, prevObject: jQuery.fn.init(1)]
1.6基本筛选器

html代码：

<div id='i10' class='c1'>
    <div>
        <a>hello</a>
    </div>
	<a>f2</a>
	<a>f3</a>
</div>
<div class='c1'>
	<a>f</a>
</div>
<div class='c1'>
	<div class='c2'> </div>
</div>
<script src="../jquery-3.5.1.js"></script>

jQuery代码：

$('#i10>a:first').text();
//输出："f2"
$('#i10>a:last').text();
//输出："f3"
$('#i10>a:eq(1)').text();
//输出："f3"
1.7 属性选择器
$('[alex]')       	具有alex属性的所有标签
$('[alex="123"]') 	alex属性等于123的标签

示例：

<div id='i10' class='c1'>
        <div>
            <a>hello</a>
        </div>
        <a alex="123"></a>
        <a alex="567"></a>
		<a>f2</a>
		<a>f3</a>
	</div>

jQuery代码：

$('[alex]');
//输出：
jQuery.fn.init(2) [a, a, prevObject: jQuery.fn.init(1)]

$('[alex="123"]');
//输出：
jQuery.fn.init [a, prevObject: jQuery.fn.init(1)]
1.8 表单选择器

html代码：

<input type="text" />
<input type="button" value="ok"/>
<input type="submit" />
<script src="../jquery-3.5.1.js"></script>

jQuery代码：

$('input [type="text"]');
//输出：
jQuery.fn.init [prevObject: jQuery.fn.init(1)]

$(':text');
//输出：
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]

$(':button');
$(':submit');
1.9 表单对象属性

html代码：

<input type="text" disabled/>
<input type="button" value="ok"/>
<input type="submit" />
<script src="../jquery-3.5.1.js"></script>

jQuery代码：

$('input:disabled');
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$(':disabled');
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]

2.筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

<div>
    <a>asdf</a>
    <a>asdf</a>
    <a id='i1'>asdf</a>
    <a>asdf</a>
    <a id='ii1'>asdf</a>
    <a>asdf</a>
</div>

$('#i1').next()					//下一个兄弟标签
$('#i1').nextAll()				//查找当前元素之后所有的同辈元素。
$('#i1').nextUntil('#ii1')		//查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

$('#i1').prev()					//上一个兄弟标签
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')

$('#i1').parent()				//父标签
$('#i1').parents()
$('#i1').parentsUntil()

$('#i1').children()				//所有子标签
$('#i1').siblings()				//siblings 所有兄弟标签
$('#i1').find()					//子孙中查找标签
$('li:eq(1)')
$('li').eq(1)					//根据索引获取元素
first()							//匹配的第一个标签
last()							//匹配的最后一个标签
hasClass(class)					//检查当前的元素是否含有某个特定的类，如果有，则返回true。

3.属性

3.1 HTML代码/文本/值
$(..).text()           	# 获取文本内容
$(..).text(“<a>1</a>”)	# 设置文本内容

$(..).html()
$(..).html("<a>1</a>")

$(..).val()
$(..).val(..)
3.2 样式操作（CSS 类）
addClass			
removeClass
toggleClass				//如果存在（不存在）就删除（添加）一个类。

示例：开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .hidden {
        display:none;
    }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关"/>
    <a>灯</a>
    <script src="../jquery-3.5.1.js"></script>
    <script>
    /*
        $('#i1').click(function(){
            if($('#i1').next().hasClass('hidden')){
                $('#i1').next().removeClass('hidden');
            }else{
                $('#i1').next().addClass('hidden');
            }
        })
    */
        $('#i1').click(function(){
            $('#i1').next().toggleClass('hidden');
        })
    </script>
</body>
</html>
3.3 属性操作
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')

<input type='checkbox' id='i1'  />


# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

PS: 
	index 获取索引位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" type="checkbox">
    <script src="../jquery-3.5.1.js"></script>
    <script>
        $('#i1').attr('name','hello');
        console.log($('#i1').attr('name'))
        $('#i1').attr('checked','checked');
        $('#i1').removeAttr('checked');
        $('#i1').prop('checked',true);
        $('#i1').prop('checked',false);
    </script>
</body>
</html>

4. 文档操作

append			//内部插入
prepend			//内部插入
after			//外部插入
before			//外部插入

remove			//删除标签
empty			//删除标签内部

clone			//克隆

5. CSS

$('t1').css('样式名称', '样式值')
点赞：
	 - $('t1').append()
	 - $('t1').remove()
	 - setInterval
	 - clearInterval
	 - 透明度 1 》 0
	 - remove
	 - position
	 - 字体大小，位置

6. 位置

$(window).scrollTop()  获取
$('div').scrollTop()  获取
$(window).scrollTop(0) 设置
scrollLeft([val])

$('#i').offset
offset().left         指定标签在html中的坐标
offset().top          指定标签在html中的坐标

			
position() 	                  指定标签相对父标签(relative)标签的坐标
<div style='relative'>
	<div>
		<div id='i1' style='position:absolute;height:80px;border:1px'></div>
	</div>
</div>
			
			
$('i1').height()           # 获取标签的高度 纯高度
$('i1').innerHeight()      # 纯高度 + padding值*2
$('i1').outerHeight()      # 获取边框 + 纯高度 + padding值*2
$('i1').outerHeight(true)  # 获取边框 + 纯高度 + padding值*2

# 纯高度，边框，外边距，内边距

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            border-radius:50%;
            height:60px;
            width:60px;
            font-size:small;
            line-height:60px;
            text-align:center;
            border:1px solid grey;
            background-color:blue;
            position:fixed;
            bottom:50px;
            right:50px;
        }
        .small {
            width:200px;
            height:200px;
            overflow:auto;
            border:1px solid red;
        }

    </style>
</head>
<body>
    <div class="small">
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    </div>
    <div id="i1">1</div>
    <div class="back">
        返回顶部
    </div>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        console.log($('.small').offset().top);
        console.log($('.small').offset().left);
        console.log($('#i1').offset().top);
        $('.back').click(function(){
            $(window).scrollTop(0);
            console.log($('.back').offset().top);
            console.log($('.back').offset().left);
        });

    </script>
</body>
</html>

7.事件

默认事件先执行： checkbox
自定义先执行 a submit

jQuery：
	$('.c1').click()
	$('.c1').....
	
	$('.c1').on('click', function(){	
	})
	$('.c1').off('click', function(){	
	})

	//$('.class').on("click",function(){……});相当于$('.class').bind("click",function(){……});
	//$(document).on("click",'.class',function(){……});相当于	$('.class').live("click",function(){……});
	//js生成的元素绑定事件必须使用live，但新版的jq，已经淘汰了live，可以用on方法代替，但必须注意写法。

	阻止事件发生
	return false



# 当页面框架加载完成之后，自动执行，一般JavaScript的代码都写在里面，速度快
$(function(){
	
	$(...)
	
})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <form id="f1" action="scoretop.html" method="get">
            <div><input type="text" ></div>
            <div><input type="password" ></div>
            <div><input type="text" ></div>
            <div><input type="text" ></div>
            <div><input type="text" ></div>
            <div><input class="deli" type="submit" ></div>
        </form>
    </div>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $('.deli').on('click',function(){
                var flag = true;
                $('.error').remove();
                $('#f1').find('input[type="text"],input[type="password"]').each(function(){
                    var v=$(this).val();
                    if(v.length <=0){
                        flag=false;
                        var tag = document.createElement('span');
                        $(tag).text('必填');
                        $(tag).addClass('error');
                        $(this).after(tag);
                    }
                })
                return flag;
            })
        })       
    </script>
</body>
</html>

8. jQuery扩展

- $.extend        $.方法
- $.fn.extend     $(..).方法

//自执行函数主要是引入其他代码时，封装变量用的。
(function(){
	var status = 1;
	// 封装变量
})(jQuery)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="i1"></div>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        $.extend({
            'maria':function(){
                return 'hello';
            }
        });
        var v=$.maria();
        alert(v);
        $.fn.extend({
            'mily':function(){
                return 'hi';
            }
        });
        var b=$('i1').mily();
        alert(b);
    </script>
</body>
</html>
WEB界面jquery1.7.2版本升级到jquery3.6版本需要注意的问题
pow8368684的专栏
05-26 1639
$.size();需要更改为$.length; 原因：1.8版本的时候$.size()被废弃 页面加载的时候，$(function(){})与onload=""谁先执行的问题。 jquery1.7.2版本：$(function(){})函数比onload=""先执行 jquery3.6版本：onload=""函数比 $(function(){})先执行 ...
jQuery-1.9.1和3.5.1.rar
08-26
jquery-1.9.1.js and jquery-3.5.1.js 两个包 来自 官网 https://code.jquery.com/jquery-1.9.1.js 日期：2020.08.26
jQuery 版本升级迁移
剑若成风的成长日志
03-11 4471
当引入重大更改时，升级 jQuery 之类的库可能需要大量工作。jQuery Migrate 通过恢复已删除的 API 来简化此操作，并在使用已删除和/或已弃用的 API 时在浏览器控制台中显示警告（仅 jQuery Migrate 开发版本）。 这样，您就可以发现并修复原本会出错的错误，直到不再需要 jQuery Migrate 并将其删除为止。
如何升级jqueryui到最新版本 csdn
最新发布
weixin_40562524的博客
08-19 152
我整理的一些关于【SDN】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/f2PFnN如何升级 jQuery UI 到最新版本 随着 Web 开发技术的不断演进，jQuery UI 作为一个常用的用户界面库，也需要定期进行更新，以利用新功能与修复已知问题。本文将介绍如何将 j...
jQuery 3.5.0 发布
寒冰屋的专栏
04-11 1853
jQuery 3.5.0 发布了，此版本主要是安全修复。 jQuery 在其jQuery.htmlPrefilter方法中使用了正则表达式，以确保在传递给方法时，所有结束标记均符合 XHTML 规则。例如，此预过滤器可确保将jQuery("<div class='hot' />")这样的调用转换为jQuery("<div class='hot'></div>...
在Web应用程序中将jQuery版本从1.8升级到3.7
寒冰屋的专栏
07-01 977
最近，我的任务是将2013年最后一次维护的Web门户中的jQuery升级到最新版本的jQuery，即截至2024年3月的3.7版。快速检查发现代码中有超过2000+个地方引用了jQuery 1.8.3
jQuery版本升级踩坑大全
weixin_30879833的博客
02-14 991
背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当，可能会有DOMXSS漏洞，非常建议升级到jQuery 1.9.x或以上版本。前段时间我就主导了这件事情...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jquery-3.5.0.js jquery-3.5.0.min.js.zip
08-17
jquery-3.5.0.js jquery-3.5.0.min.js.zip
jQuery升级方法
热门推荐
graves-yu的博客
03-31 1万+
起因： 公司绿盟扫描扫出网元有jQuery版本漏洞问题 升级方法： 1.找到jQuery文件，我的路径为：/src/main/webapp/plugin/jquery/js/jquery.min.js 2.下载需要升级的jQuery文件到指定目录，建议与升级前的jQuery文件同目录。下载地址：https://jquery.com/download/ 3.更换jQuery的引用。 ...
记录一个前端页面因为jQuery版本升级后出现的问题
chen__miao的博客
03-06 1416
记录一个前端页面因为jQuery版本升级后出现的问题
csdn️最详细最优秀的⛽️—JQuery的学习以及一些操作的演示
nglasds的博客
12-10 169
1⃣️ 首先了解JQuery 那么jquery是js的语言的精简版本????️以说是用起来相比较js是已经取而代之的一门流行语，那么接下来掩饰一些操作。 2⃣️ JQuery操作演示案例 2.1 弹框案例 </html>!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery导入</title> <!--
jquery .on()替代bind(), live(), delegate()
segclliwf的博客
09-09 289
在查看或學習一些舊的jquery文章及代碼時（歷史有點遠-)，經常會看到綁定事件出現bind(), live(), delegate等，造成一些困惑。jq1.7版本以后，為統一和效能，用on()替代bind(), live(), delegate。 如果您 還有興趣，可以再了解下： bind(type,[data],fn) 為每個匹配元素的特定事件繫結事件處理函式 $(“a”).bind(“click”,function(){alert(“ok”);}); live(type,[data],fn)
jQuery基础指南
"这是一本关于jQuery的袖珍参考手册，由David Flanagan编写，旨在帮助读者快速理解和掌握jQuery基础。该书由O'Reilly Media出版，适合教育、商业或促销用途。" jQuery是一种广泛使用的JavaScript库，它简化了网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值