ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

JQuery使用

2022-01-03 17:03:01  阅读：159  来源： 互联网

标签：JQuery console log 元素 prop 使用 checked 选择器


引入文件

(1)jquery-3.6.0.js和jquery-3.6.0.min.js
(2)以上两个文件任选其一即可
(3)引入：
    <script src="js/jquery-3.6.0.js" type="text/javascript" 
            charset="utf-8">
       </script>
(4)语法：
    $("选择器").jQuery()

选择器 

全局选择器：$("*")
元素选择器：$("元素名称")
class选择器：$(".元素的class属性值")
id选择器：$("#元素的id属性值")
选择器组：$("选择器1,选择器2")
交集选择器：$("选择器1选择器2")   先写元素选择器
后代选择器：$("选择器1 选择器2")
子代选择器：$("选择器1>选择器2")
匹配属性名称：$("元素名称[属性名称]")
匹配属性名称和属性值：$("元素名称[属性名称="属性值"]")

 :first  第一个元素
:last 最后一个元素
:odd 索引值为奇数
:even 索引值为偶数
:eq(索引) 等于
:gt(索引) 大于
:lt(索引) 小于

:input 输入框
:text  文本框
:password 密码框
:radio 单选按钮
:checkbox 复选框
:checked 默认选中(单选按钮、复选框)
:disabled 不可用
:selected 默认选中(下拉选)
:visible 可见、显示
:hidden  隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" 
                charset="utf-8">
        </script>
	</head>
	<body>
		<ul id="mySubject">
			<li>Spring</li>
			<li>SpringMVC</li>
			<li>MyBatis</li>
			<li>SpringBoot</li>
		</ul>
	</body>
	<script type="text/javascript">
		/* 
			选择器：
				:first  第一个元素
				:last 最后一个元素
				:odd 索引值为奇数
				:even 索引值为偶数
				:eq(索引) 等于
				:gt(索引) 大于
				:lt(索引) 小于
		 */
		
		/* :first  第一个元素 */
		console.log($("#mySubject li:first").html());
		/* :last 最后一个元素 */
		console.log($("#mySubject li:last"));
		/* :odd 索引值为奇数 */
		console.log($("#mySubject li:odd"));
		/* :even 索引值为偶数 */
		console.log($("#mySubject li:even"));
		/* :eq(索引) 等于 */
		console.log($("#mySubject li:eq(2)").html());
		/* :gt(索引) 大于 */
		console.log($("#mySubject li:gt(0)"));
		/* :lt(索引) 小于 */
		console.log($("#mySubject li:lt(2)"));
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" 
                charset="utf-8">
		</script>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				/* 隐藏 */
				display: none;
			}
			
			#div2{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			
		</style>
	</head>
	<body>
		<input type="text" value="tom"/>
		<br>
		<input type="password" value="1234"/>
		<br>
		<input type="radio" value="0"/>男
		<input type="radio" value="1" checked/>女
		<br>
		<div>
			<input type="checkbox" value="0"/>唱歌
			<input type="checkbox" value="1" checked/>跳舞
			<input type="checkbox" value="2" checked/>打游戏
		</div>
		<br>
		<select>
			<option value ="01">郑州</option>
			<option value ="13" selected>新乡</option>
			<option value ="34">洛阳</option>
		</select>
		<br>
		<input type="button" value="按钮" disabled/>
		<input type="button" value="按钮2"/>
		<br>
		<div id="bottomdiv">
			<div id="div1">
				div1
			</div>
			<div id="div2">
				div2
			</div>
		</div>
	</body>
	<script type="text/javascript">
		/* 
			选择器：
				:input 输入框
				:text  文本框
				:password 密码框
				:radio 单选按钮
				:checkbox 复选框
				:checked 默认选中(单选按钮、复选框)
				:disabled 不可用
				:selected 默认选中(下拉选)
				:visible 可见、显示
				:hidden  隐藏
		 */
		
		/* :input  input元素 */
		// $(":input").css("background-color","green");
		/* :text 文本框 */
		// $(":text").css("color","red");
		/* :password 密码框 */
		// $(":password").css("color","red");
		/* :radio 单选按钮 */
		// console.log($(":radio"));
		/* :checked 默认选中 */
		// console.log($(":checked"));
		/* :checkbox 复选框 */
		// console.log($(":checkbox"));
		/* :checked 默认选中 */
		// console.log($(":checkbox:checked"));
		// console.log($("div :checkbox:checked"));
		// console.log($("div :checked"));
		// console.log($(":selected").val());
		/* :disabled 不可用 */
		// console.log($(":disabled"));
		/* :visible 显示 */
		// $("#bottomdiv :visible").css("background-color","red");
		/* :hidden  隐藏 */
		console.log($("#bottomdiv :hidden").html());;
	</script>
</html>

常用方法

(1)获取value属性值：比如input
    获取value属性值：val()
    设置value属性值：val(值)
(2)获取值(内容体)：比如h1
    获取值(内容体)：html()
    设置值(内容体)：html(值)
(3)样式：
    设置值：css(样式属性名称,属性值)
    获取值：css(样式属性名称)
(4)find(选择器)：查找子元素
(5)not(选择器)：除了...
(6)next()：下一个同级元素
(7)prev()：上一个元素
(8)prop()：
    比如checked属性
        获取值：prop("checked")
        设置值：prop("checked",true/false)
(9)遍历：
    $(选择器).each(function(i){
        //i：索引值
        //this：遍历到的元素
    })

$.each(遍历的元素，function（）{

})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" 
    			charset="utf-8">
    	</script>
		<style type="text/css">
			#mydiv{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<input type="text" value="月薪过万"/>
		<br>
		<h1>Web</h1>
		<div id="mydiv"></div>
		<ul id="mySubject">
			<li>Spring</li>
			<li>SpringMVC</li>
			<li>MyBatis</li>
			<li>SpringBoot</li>
		</ul>
		
		<input id="fullcheck" type="checkbox"/>全选
		<input id="reversecheck" type="checkbox"/>反选
		<div>
			<input type="checkbox" value="0"/>唱歌
			<input type="checkbox" value="1"/>跳舞
			<input type="checkbox" value="2"/>打游戏
		</div>
		
	</body>
	<script type="text/javascript">
		/* 
			常用方法：
				(1)获取value属性值：比如input
					获取value属性值：val()
					设置value属性值：val(值)
				(2)获取值(内容体)：比如h1
					获取值(内容体)：html()
					设置值(内容体)：html(值)
				(3)样式：
					设置值：css(样式属性名称,属性值)
					获取值：css(样式属性名称)
				(4)find(选择器)：查找子元素
				(5)not(选择器)：除了...
				(6)next()：下一个同级元素
				(7)prev()：上一个元素
				(8)prop()：
					比如checked属性
						获取值：prop("checked")
						设置值：prop("checked",true/false)
				(9)遍历：
					$(选择器).each(function(i){
						//i：索引值
						//this：遍历到的元素
					})
		 */
		
		/* 获取value值 */
		console.log($(":text").val());
		/* 设置value值 */
		$(":input").val("早日转正");
		
		/* 获取值 Web */
		console.log($("h1").html());
		/* 设置值 Java */
		$("h1").html("Java");
		
		/* 设置样式 背景颜色 */
		$("#mydiv").css("background-color","red");
		/* 获取值 */
		console.log($("#mydiv").css("background-color"));
		
		/* find(选择器) 查找子元素 */
		console.log($("#mySubject").find("li"));
		/* not(选择器) 除了... */
		console.log($("#mySubject").find("li").not(":first"));
		console.log($("#mySubject").find("li").not(":last"));
		/* next() 下一个元素 */
		console.log($("li:eq(0)").next().html());//SpringMVC
		/* prev() 上一个元素 */
		console.log($("li:eq(2)").prev().html());//SpringMVC
		
		/* 复选框：全部选中 */
		/* 隐式循环 */
		/* prop() */
		// $(":checkbox").prop("checked",true);
		/* 全选 */
		$("#fullcheck").click(function(){
			// console.log($(this).prop("checked"));
			//this：操作的元素
			$("div :checkbox").prop("checked",$(this).prop("checked"));
		})
		
		/* 反选 */
		$("#reversecheck").on("click",function(){
			/* 原来true 反选false   原来false 反选true */
			/* 遍历 */
			$("div :checkbox").each(function(i){
				//i：索引值
				console.log(i);
				
				//this 遍历到的每个元素
				$(this).prop("checked",!$(this).prop("checked"));
			})
		})
	</script>
</html>

 事件

$(选择器).click(function(){
    //执行任务
})
                    
$(选择器).on("click",function(){
    //执行任务
})

增加：
    针对父元素，增加子元素
    在A的末尾增加B：
        A.append(B)
        B.appendTo(A)
    在A的头部添加B：
        A.prepend(B)
        B.prependTo(A)
针对同辈元素，增加\插入元素
    在A的前边增加B：
        A.before(B)
        B.insertBefore(A)
    在A的后边增加B：
        A.after(B)
        B.insertAfter(A)

复制：
    clone() 参数为true，复制原元素绑定的事件
删除：
    remove() 删除自身和子元素
    empty()  删除子元素
获取：
    针对父元素，获取子元素：children()
    针对子元素，获取父元素：
        parent() 获取直接父元素
        parents() 获取所有的父元素   ...html
    针对同辈元素：
        获取上一个兄弟节点：prev()
        获取下一个兄弟节点：next()
        获取所有的兄弟节点：siblings()    不包含自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" 
                charset="utf-8">
        </script>
	</head>
	<body>
		<input id="add" type="button" value="增加"/>
		<input id="clone" type="button" value="复制"/>
		<input id="del" type="button" value="删除"/>
		<input id="get" type="button" value="获取"/>
		
		<ul id="job" >
			<li>Java</li>
			<li>Web</li>
			<li id="test">软件测试</li>
			<li>需求</li>
			<li>产品经理</li>
			<li>运维</li>
		</ul>
		<ul id="job2">
			<li>UI设计</li>
		</ul>
	</body>
	<script type="text/javascript">
		// 在 软件测试 上绑定单击事件
		/* $("#test").click(function(){
			console.log(1);
		}) */
		$("#test").on("click",function(){
			console.log(1);
		})
	
		// 获取
		$("#get").click(function(){
			// 需求1：获取Java
			// console.log($("#job :first").html());
			// console.log($("#job li").eq(0).html());
			// 需求2：获取第一个ul中的所有li
			// children()：获取子元素
			// console.log($("#job").children());
			// 需求3：获取 软件测试 的父元素
			// parent()：获取直接父元素
			// console.log($("#test").parent());//ul
			// parents()：获取所有的父元素  ul\body\html
			// console.log($("#test").parents());
			// 需求4：获取 软件测试 的下一个兄弟节点
			console.log($("#test").next());//需求
			// 需求5：获取 软件测试 的上一个兄弟节点
			console.log($("#test").prev());//Web
			// 需求6：获取 软件测试 的所有(不包含自己)兄弟节点
			console.log($("#test").siblings());
		})
		
		// 删除
		$("#del").click(function(){
			// 需求1：删除第一个ul中的内容
			// remove()：删除自身和子元素
			// $("#job").remove();
			// empty()：删除子元素
			$("#job").empty();
		})
		
		// 复制
		$("#clone").click(function(){
			// 需求1：复制 软件测试，添加到第一个ul的末尾
			// 复制元素：clone()，参数为true，复制绑定事件
			var newLi=$("#test").clone(true);
			
			$(newLi).appendTo($("#job"));
		})
		
		// 增加
		$("#add").click(function(){
			var newLi="<li>云计算</li>";
			// 需求1：在ul的末尾添加 云计算
			// 末尾追加：在A的末尾添加B   A.append(B)   B.appendTo(A)
			// $("#job").append(newLi);
			// $(newLi).appendTo($("#job"));
			
			// 需求2：在ul的头部添加 云计算
			// $("#job").prepend(newLi);
			// $(newLi).prependTo($("#job"));
			
			// 需求3：在 软件测试 之前添加 云计算
			// $("#test").before(newLi);
			// $(newLi).insertBefore($("#test"));
			
			// 需求4：在 软件测试 之后添加 云计算
			// $("#test").after(newLi);
			// $(newLi).insertAfter($("#test"));
			
			// 需求5：在第二个ul的末尾添加 第一个ul中的软件测试
			var newLi2=$("#test");
			$("#job2").append(newLi2);
		})
	</script>
</html>

 

属性操作

attr()和prop()：
    attr()：获取自定义属性的属性值
    prop()：针对于disabled、checked...，若元素具有这些属性，返回值为true，反之为    false 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" 
    			charset="utf-8">
    	</script>
	</head>
	<body>
		<input type="text" value="123" myname="tom"/>
		<br>
		<input type="checkbox"  />Java
	</body>
	<script type="text/javascript">
		/* 
			attr()和prop()
				对于普通属性，比如type、value等，若需获取属性值，如上两个方法均可
				attr()：获取自定义属性的属性值
				prop()：针对于disabled、checked...，若元素具有这些属性，
						返回值为true，反之为false
		 */
		console.log($(":text").attr("type"));//text
		console.log($(":text").prop("type"));//text
		console.log($(":text").attr("value"));//123
		console.log($(":text").prop("value"));//123
		console.log($(":text").attr("disabled"));//disabled/undefined
		console.log($(":text").prop("disabled"));//true/false
		console.log($(":text").attr("myname"));//tom
		console.log($(":text").prop("myname"));//undefined
		
		console.log($(":checkbox").attr("type"));//checkbox
		console.log($(":checkbox").prop("type"));//checkbox
		console.log($(":checkbox").attr("checked"));//checked/undefined
		console.log($(":checkbox").prop("checked"));//true/false
	</script>
</html>

事件绑定：
    $(选择器).事件(function(){})
    $(选择器).on("事件",function(){})
事件解绑：
    $(选择器).off("事件")

    // 事件绑定
        // $("input").click(function(){
        //     // 事件解绑  让事件只能执行一次
        //     $(this).off("click");
            
        //     console.log($(this).val());
        // })

标签：JQuery,console,log,元素,prop,使用,checked,选择器
来源： https://blog.csdn.net/m0_47760827/article/details/122288960

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有