jquery

最新推荐文章于 2024-08-09 02:16:38 发布
最新推荐文章于 2024-08-09 02:16:38 发布
阅读量185 收藏
点赞数
分类专栏： java 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyk1599021827/article/details/90713439
版权

jq

1 jquery 概念

jquery是基于js开发的框架。这个框架将原生的js代码封装了，成为了一个函数库，我们只需要按照其语法进行调用即可。
其实jquery对js原生代码进行封装就像java的类封装了很多方法一样，是类似的概念。

注意
jquery函数库的下载是在maven的网站进行下载
jquery只是一个js函数库，要是用里面的函数还需要在其他的js文件中进行调用
将jquery拷贝到项目中进行调用

使用js加载事件的方法

//原生加载事件
window.onload=function(){
alert("事件加载")
}

使用jq加载事件的三种方法
第一种写法

//jq中提供的加载事件
$(document).ready(function(){
//指定其中代码
alert("加载html完毕后马上执行代码")
});

第二种写法

 //jq中提供的加载事件
$(function(){
//指定其中代码
alert("加载html完毕后马上执行代码")
});

第三种写法

    //jq中提供的加载事件
jQuery(document).ready(function($){
//指定其中代码
alert("加载html完毕后马上执行代码")
});

DEMO使用jq操作html的节点

<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>

使用js实现
在这里插入图片描述
结果是
在这里插入图片描述
使用jq实现
在这里插入图片描述

·$(“tr”) 表示选择出页面中的所有的tr元素

·$(“tr:eq(0)”) 表示选择出页面中的第一个tr元素

·$(“tr:eq(0)”).html() 表示取得页面中的第一个元素下的html代码

结果是
在这里插入图片描述

2 jq 选择器

概念 ：jq选择器和css选择器语法类似，选择器是jq的灵魂，离开了选择器什么也做不了，它是将html中的节点元素选择出来的语法，他也是非常灵活的

1 Id选择器

特点
在ID属性值之前加上“ # ”

html代码

<div id = "notMe">
	<p>id="notMe"</p>
</div>

<div id="myDiv">
	id="myDiv"
</div>

jq代码

$(document).ready(function(){
		 var div= $("#myDiv");
});

结果

<div id="myDiv">
	id="myDiv"
</div>

2 类选择器

特点
1.在class属性值之前加上“ . ”
2.返回值是一个元素的对象数组

html代码

<div class="notMe">
	div class = "notMe"
</div>

<div class="myClass">
  div class="myClass"
</div>

<span class="myClass">
  span class="myClass"
</span >

jq代码

$(document).ready(function(){
		 var d= $(".myClass");
})

结果

<div class="myClass">
  div class="myClass"
</div>

<span class="myClass">
  span class="myClass"
</span >

3 元素选择器

特点
1.直接使用用元素名称选择
2.返回值是一个对象数组

html代码

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jq代码

$(document).ready(function(){
		 var d= $("div");
})

结果

<div>DIV1</div>
<div>DIV2</div>

4 组选择器

特点
1.一次可以使用多种选择器选择元素，每个选择器用“ ，”隔开
2.返回值类型是一个对象数组

html代码

<div>div</div>

<p class='myClass'>
	p class="myClass"
</p>

<span>span</span>

<p class="notMyClass">
	p class="notMyClass"
</p>

jq代码

$(function(){
		 var elemeents= $("div , span , .myClass");
})

结果

<div>div</div>

<p class='myClass'>
	p class="myClass"
</p>

<span>span</span>

5 后代选择器

特点
1.选择出指定父元素下指定的所有子孙元素
2.返回值类型是一个对象数组
html代码

<form>
	<lable>Name:</lable>
	<input name="name"/>
	
	<fieldset>
		<lable>Newsletter:</label>
		<input name="newsletter"/>
	</fieldset>
	
</form>
<input name="none"/>

jq代码

$(function(){
	 var einputs= $("form input");
})

结果

	<input name="name"/>    ,	<input name="newsletter"/>

6 子选择器

特点
1.选择指定父元素在的子元素
2.返回值类型是一个对象数组

html代码

<form>
	<laable>Name:</lable>
	<input name="name"/>
	<fieldset>
			<lable>Newsletter:</label>
			<input name="newsletter"/>
	</fieldset>
 </form>
 <input name="none"/>

jq代码

$(function(){
	 var input= $("form >input");
})

结果

<input name="name"/>

7 选择第一个元素

html代码

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

jq代码

$(function(){
	 var item= $("ul li:first");
	 console.log(item[0]);
})

结果

<li>list item 1</li>

8 最后一个元素

html代码

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

jq代码

$(function(){
	 var item= $("ul li:last");
	 console.log(item[4]);
})

结果

<li>list item 5</li>

9 not 选择器

一般在复选框中使用的多（表单的复选框中）
返回值是对象数组

html代码

<input type="checkbpx" checked name="ints">阅读
<input type="checkbox" name="ints">跑步
<input type="chekkbox" name="ints">篮球
<input type="chekkbox" checked name="ints">游泳

jq代码

$(function(){
	 var boxes= $("input:not(:checked)");
	 for(var i=0;i<boxes.length.i++){
 		console.log(boxes[i]);
	 }	
})

结果

<input type="checkbox" name="ints">跑步
<input type="chekkbox" name="ints">篮球

10 偶数选择器

html代码

<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>
jq代码 
$(document).ready(function(){
	 var  trs = $("table tr:even");
	 for(var i=0;i<trs.length;i++){
		 $("trs[i]".css({color:"#fff0011",background:"blue"})
)}

});

结果
在这里插入图片描述

11 奇数选择器

1,不管是奇数还是偶数选择，都是以元素索引为准（从0开始）
2，他们的返回值都是一个对象数组
html代码

<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>
jq代码 $(function(){ var trs=$("table tr :odd") for(var i=0,i

结果
在这里插入图片描述

12 eq选择器

特点
1，选择指定索引的元素对象
2，返回值是一个对象
html代码

	<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>
jq代码 
	$(function(){
		var trs= $("table tr :eq(2)")
		for(var i=0;i<trs.length;i++){
		$(trs[i].css({color:#ff0011,background:"blue"}))}
});

结果
在这里插入图片描述

13 gt(index)选择器，选择大于指定索引的元素

html代码

	<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>
jq代码 
	$(function(){
		var trs= $("table tr :gt(0)")
		for(var i=0;i<trs.length;i++){
		$(trs[i].css({color:#ff0011,background:"blue"}))}
});

结果
在这里插入图片描述

14 lt（index）选择器 选择小于指定索引的元素

html代码

<body>
<table border="5">
    <tr>
        <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
        <td>部门编号</td>
    </tr>
    <tr>
        <td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
    <tr>
        <td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
    </tr>
</table>
jq代码 
	$(function(){
		var trs= $("table tr :lt(2)")
		for(var i=0;i<trs.length;i++){
		$(trs[i].css({color:#ff0011,background:"blue"}))}

结果
在这里插入图片描述

15 属性选择器

1 id 属性

html代码

<div>
	<p>hello!</p>
</div>
<div  id="test2"></div>

jq代码

$(function(){
var divs=$("div[id]");
console.log(divs[0]);
});

结果

<div  id="test2"></div>

2 选择出“具有”指定属性且属性值等于指定的内容的所有元素

在这里插入图片描述
结果
在这里插入图片描述

3选择出“不具有”指定属性且属性值等于指定的内容的所有元素

在这里插入图片描述
结果

4 选出以指定内容开始的属性的所有元素

在这里插入图片描述
结果为
在这里插入图片描述

5 查找所有name指定包含“man”的元素

在这里插入图片描述
结果为
在这里插入图片描述

6 选择出以指定内容结尾的元素

html代码


jq代码
KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ var inputs=(“input[name$=‘letter’]”)
})

结果

3 jquery常用方法

1 取得指定元素下的所有子元素

html 代码

<p>hello</p>
<div>
<span>hello again</span>
<p>这是段落</p>
</div>

jq代码

$(function(){
var div=$("div").children()})

结果

<span>hello again</span>
<p>这是段落</p>

2

lyk1599021827
关注
专栏目录
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 或更高版本上运行。 ...
20 jquery基础
lovetg0419的博客
11-03 139
一、 快速入门                                                                                                                           1.jquery-xxx.js 与 jquery-xxx.min.js区别：                 1. jquery-xxx...
Jquery
Leprehuan的博客
04-23 1938
正课: 1. 什么是jQuery 2. 如何使用jQuery 3. jQuery原理: 4. jQuery API 三大特点: 5. 查找元素 6. 修改元素 7. 按节点间关系查找 一. 什么是jQuery 1. 什么是: (1). 第三方开发的: 必须下载才能用 (2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。 (3). 极简化的: jQuery对DOM操作的每一步都进行了简化。 (...
【jQuery】入门学习篇
最新发布
2201_75503057的博客
08-09 1036
【jQuery】入门学习篇
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.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....
强烈推荐：240多个jQuery插件
weixin_33964094的博客
12-09 243
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能...
jQuery
05-31
jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编写的复杂度。它是免费、开源的，可以跨浏览器使用，支持主流的浏览器。 jQuery 提供了很多的 API 和方法，可以用于 DOM 操作、事件处理、AJAX、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值