jQuery入门

已于 2022-04-21 15:23:48 修改
阅读量686 收藏
点赞数
分类专栏： JavaWeb 文章标签： java
于 2022-04-20 19:55:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55997161/article/details/124301487
版权

辅助JavaScript 开发的js类库。使用前需要导入对应的js

${}

1、传入参数为 [ 函数 ] 时： 表示页面加载完成之后。相当于 window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时： 会对我们创建这个 html 标签对象

3、传入参数为 [ 选择器字符串 ] 时： $(“#id 属性值”); id 选择器，根据 id 查询标签对象 $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时： 会把这个 dom 对象转换为 jQuery 对象

基本选择器

#ID 选择器：根据 id 查找标签对象

.class 选择器：根据 class 查找标签对象

element 选择器：根据标签名查找标签对象 * 选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.选择 id 为 one 的元素 "background-color","#bbffaa"
            $("#btn1").click(function () {
                // css() 方法 可以设置和获取样式
                $("#one").css("background-color","#bbffaa");
            });
            //2.选择 class 为 mini 的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color","#bbffaa");
            });
            //3.选择 元素名是 div 的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");
            });
            //4.选择所有的元素
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");
            });
            //5.选择所有的 span 元素和id为two的元素
            $("#btn5").click(function () {
                $("span,#two").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->
<input type="button" value="选择 id 为 one 的元素" id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
<input type="button" value="选择 所有的元素" id="btn4"/>
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>

<br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

层级选择器

ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //不传参数是获取，传参数是设置
            alert($("div").html());
            $("div").html(" <h1>我是div中的标题</h1>");
            //html()和text()的不同在于标签的识别,在text中<h1>不会被识别
            $("button").click(function () {
                alert($("#username").val());
                $("#username").val("123456");
            });
        });
    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>
</html>

设置选中状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //单选
            $(":radio").val(["radio2"]);
            //多选
            $(":checkbox").val(["checkbox1","checkbox2"]);
            //多选下拉
            $("#multiple").val(["mul2","mul3"]);
            //单选下拉
            $("#single").val(["sin3"]);
        });
    </script>
</head>
<body>
单选：
<input name="radio"type="radio"value="radio1"/>radiol
<input name="radio"type="radio"value="radio2"/>radio2
<br/>
多选：
<input name="checkbox"type="checkbox"value="checkbox1"/>checkbox1
<input name="checkbox"type="checkbox"value="checkbox2"/>checkbox2
<input name="checkbox"type="checkbox"value="checkbox3"/>checkbox3
<br/>
下拉多选
<select id="multiple"multiple="multiple"size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
</select>
<br/>
下拉单选
<select id=single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>

attr()

可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

prop()

可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

1while(true){learn}
关注
专栏目录
jQuery api学习笔记
while(True): print('adorable')
07-09 164
不断更新。
JavaScript While循环
wuxiaopengnihao1的博客
08-26 2839
在 JavaScript语言中，当我们使用while循环时，只要指定条件为true，循环就可以一直执行。本文章向大家介绍JavaScript While循环语法、注意事项以及使用实例。
jQuery应用实例
m0_55997161的博客
04-21 1007
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script> $(function () { ...
巧用while(true){ }死循环的一个小例子
热门推荐
nrsc
06-21 2万+
package cn.itcast.zuoye_GuanQia2_day03;/* * 请按如下要求编写程序,打印菜单: 1.从键盘上录入一个1到5的数字; 2.当数字为1时打印菜单”新建”; 当数字为2时打印菜单”打开文件”; 当数字为3时打印菜单”保存”; 当数字为4时打印菜单”刷新”;
【转】for(;;)和while(true)的区别
ashqal的专栏
01-02 8918
转自http://bbs.csdn.net/topics/310037252 一直知道for(;;)和while(true)都是无限循环，今天搜了下原理 while VS. for  　　在编程中，我们常常需要用到无限循环，常用的两种方法是while (1) 和 for (；；)。这两种方法效果完全一样，但那一种更好呢？让我们看看它们编译后的代码：     编译前      
jQuery学习--选择器的使用
while(True): print('adorable')
07-07 173
jQuery基本选择器jQuery的ready事件 -> js的onload选择器的使用 jQuery的ready事件 -> js的onload 大多是第一种，匿名函数写法 <script type="text/javascript"> // 匿名函数写法 ready 开始函数 $(function() { // -> js的窗体加载事件 alert("hello jQuery!"); }); // 其它写法 jQuery(funct
jquery入门（一）
03-26
本篇将作为jQuery入门的起点，带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前，首先需要在项目中引入jQuery库。最常见的方式是通过CDN（内容分发网络）链接，这样...
JQuery入门，JQuery总结
最新发布
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
while（true)与for(;;)的区别
weixin_33937499的博客
08-14 179
//debug版本 #include<iostream> using namespace std; int main() { //for (;;); /* 00C152BE jmp main + 1Eh (0C152BEh)//直接跳转到循环，只有一条语句 */ int i...
jquery中的循环技巧
dangerYe的专栏
06-18 1万+
Js代码   作者：nuysoft/JS攻城师/高云　QQ：47214707　EMail：nuysoft@gmail.com 声明：本文为原创文章，如需转载，请注明来源并保留原文链接。 前记：本文收集了jQuery中出现的各种遍历技巧和场景 Js代码   // 简单的for-in（事件）   for ( type in events ) {
javascript while循环基本
菜鸟技术员
03-24 168
while循环与for实现的效果类似,语法有些差别: 语法:当条件表达式结果为真(true)时,执行循环体,否则退出循环 while (条件表达式) { //循环体 //还需要计数器更新,否则会陷入死循环 } <script type="text/javascript"> //while循环 var number = 1; while (number <= 50) { //条件满足,执行循环体(console.log...) c.
Jquery入门
while false
04-05 173
作为一款轻量级的Javascript库，Jquery有许多优点，是对JS的封装，但是不是全部封装，毕竟有些JS是封装不了的 而Jquery就是依赖JS的，学习Jquery首先要导入Jquery库，然后要会看Jquery的文档，并且Jquery2.0版本以后不再支持IE6.0,7.0,8.0,  .js是源码版，.min.js是压缩版 1.传统JS与Jquery的比较 可以很清楚的看出，使...
javascript中while循环、do....while与for循环的用法和区别
wmeng13的博客
07-07 7151
while语法： 1.while语法： while(循环条件){ 循环主体; } 计算表达式的值，当值为真(非0)时，则 执行循环体语句。 例： &lt;script type="text/javascript"&gt; //猜数字游戏，谜底：50； //若用户猜的小于50，提示：猜小了；否则提示猜大了；猜中了，提示：中奖了(不能继续猜谜)！ while(true){...
JavaScript
fagdg的博客
03-28 535
一、JavaScript： 1、JavaScript是一种轻量级的脚本语言。 2、JavaScript是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。 3、JavaScript通过浏览器进行解析。 二、JavaScript的嵌入方式： 1、内嵌式：嵌入在html的<script>标签中，通常我们都把JavaScript代码放到<head>中。 &lt...
jquery miniui 学习笔记
tong19901018的专栏
10-13 1066
1.取组件值 传递form data，load发送 请求加载数据     mini.parse();   // get grid   var grid = mini.get("grid");   var form = new mini.Form("#form");   function search() {   //取得某个id组件的 value    var rq = mini.
从零开始的jQuery入门教程
"这是一份详尽的jQuery入门教程，旨在引导初学者逐步掌握jQuery的核心概念和常见用法。教程由一系列文章组成，包括从基础到高级的各种主题，如选择器、DOM操作、事件处理、Ajax、动画效果以及jQuery UI的实战应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1while(true){learn}

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值