jQuery入门及jQuery选择器

最新推荐文章于 2024-03-20 16:21:21 发布

淡忘728

最新推荐文章于 2024-03-20 16:21:21 发布

阅读量355

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127259774

版权

认识jQuery(工具源)

jQuery是继Prototype之后又一个优秀的JavaScript库,是由John Resig创建于2006年1月的一个开源项目。

jQuery的优势

1.轻量级

2.强大的选择器

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的AJAX

6.不污染顶级变量

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层的分离

11.丰富的插件操作

12.完善的文档

jQuery的使用

文档加载(就绪)事件

jQ中的ready()方法与jS中onload()方法的区别

jS中onload()方法：只能执行一次，执行第二次时会覆盖第一次执行；必须等网页全部加载完毕后(包括图片)执行代码。

jQ中的ready()方法：可以执行多次，且不覆盖之前的执行；只要等网页中的DOM结果加载完毕就可以执行代码；可简写为$(function(){};

jQ选择器

<script type="text/javascript">
			$(function(){
				//JQ的ID选择器
				var d1 = $("#d1");
				console.log(d1.text());
				//JQ的class选择器
				var c1 = $(".c1");
				console.log(c1.text());
				//JQ的标签选择器
				var p = $("p");
				console.log(p.text());
				//层级选择器(子代选择器:>/后代选择器: ) ul>li:直接包含的li  ul li:所有包含的li
				var li = $("ul>li");//获取ul中直接li元素
				li.css("color","red")
//				var li = $("ul li");//获取ul下所有li元素
//				li.css("color","red")
				//属性选择器
				//var a = $("a[target]");//选择具有target属性的a标签
				var a = $("a[target='_blank']");//选择具有target属性且属性值是_blank的a标签
				a.css("color","red")
			});
		</script>

<script type="text/javascript">
			$(function(){
				//过滤选择器
				//var li = $("ul>li:gt(2)");//获取到的li元素中索引大于2的元素
				//var li = $("ul>li:lt(2)");//获取到的li元素中索引小于2的元素
				//var li = $("ul>li:odd");//获取到的li元素中索引为奇数的元素 1 3 5
				//var li = $("ul>li:even");//获取到的li元素中索引为偶数的元素0 2 4
				var li = $("ul>li:eq(3)");//获取到的li元素中索引为3的元素
				//var li = $("ul>li:first");//获取到的li元素中索引第一个的元素
				//var li = $("ul>li:last");//获取到的li元素中索引最后一个的元素
				li.css("color","red")
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柚子</li>
			<li>橙子</li>
			<li>榴莲</li>
			<li>西瓜</li>
		</ul>
	</body>

<script type="text/javascript">
			$(function(){
				//按钮的点击事件
				$("#btn").click(function(){
					var jq1 =$("input:enabled");//:enabled匹配所有可用元素
					//alert(jq1.val());
					var jq2 =$("input:checked");//:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
					for (var i =0;i<jq2.length;i++) {
						var dom = jq2[i];
						alert(dom.value);
					}
					var jq3 =$("select>option:selected");//:selected匹配所有选中的option元素
						var dom = jq3[i];
						alert(dom.value);
					
				});
			});
			$(function(){
				//提交按钮的点击事件
				$("#read").click(function(){
					//如果选中，提交按钮可用；反之不可用
					
				});
			});
		</script>
	</head>
	<body>
		<form action="#" method="post">
			可用表单:<input type="text" name="name" value="" /> <br />
			不可用表单:<input type="text" name="id" value="编号20066" disabled="true" /> <br />
			单选框:<input type="radio" name="sex" value="男" />男
			<input type="radio" name="sex" value="女" />女<br />
			复选框:<input type="checkbox" name="hobby" value="唱歌"/>唱歌
			<input type="checkbox" name="hobby" value="说唱"/>说唱
			<input type="checkbox" name="hobby" value="篮球"/>篮球<br />
			下拉框:<select name="addr">
				<option value="河南">河南</option>
				<option value="河北" selected="true">河北</option>
				<option value="山东">山东</option>
				<option value="陕西">陕西</option>
			</select> <br />
			<input type="checkbox" name="hobby" value=""/>同意<a href="#">协议</a><br />
			<!--<button type="button" id="btn"/>按钮</button>-->
			<button type="submit" id="read" disabled="true"/>提交</button>
		</form>

jQ案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">	
			#context{
				width: 300px;
				height: 400px;
				background-color: coral;
			}
		</style>
		<script src="js/jquery.min (1).js">	
		</script>
		<script type="text/javascript">
			
			$(function(){
				//1.点击按钮，让第首项变红，其他项变蓝色
				//siblings():获取除被选中元素之外所有的同级元素节点(排他思想)
				$("#btn1").click(function(){
					$("ul>li:first").css("color","red");
					$("ul>li:first").siblings().css("color","blue");
				});
				//1.点击哪一项，让当前项变红色,其他项变蓝色
				$("ul>li").click(function(){
					$(this).css("color","red");
					$(this).siblings().css("color","blue");
				});
				
				//变宽
				$("#toWidth").click(function(){
					$("#context").css("width","500px");
				});
				
				//变高
				$("#toHeight").click(function(){
					$("#context").css("height","500px");
				});
				
				//隐藏:hide()
				$("#toHide").click(function(){
					$("#context").hide();
				});
				
				//显示:show()
				$("#toShow").click(function(){
					$("#context").show();
				});
				
				//切换:toggle()原本是隐藏就显示，原本是显示就隐藏
				$("#toTiggle").click(function(){
					$("#context").toggle();
				});
				
				//淡入:fadeIn()2000毫秒
				$("#tofadeIn").click(function(){
					$("#context").fadeIn(2000);
				});
				//淡出:fadeOut()2000毫秒
				$("#tofadeOut").click(function(){
					$("#context").fadeOut(2000);
				});
				//上下滑动:slideToggle()
				$("#toslide").click(function(){
					$("#context").slideToggle(2000);
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柚子</li>
			<li>橙子</li>
			<li>榴莲</li>
		</ul>
		<button id="btn1">按钮</button>
		
		<hr />
		
		<button id="toWidth">变宽</button>
		<button id="toHeight">变高</button>
		<button id="toHide">隐藏</button>
		<button id="toShow">显示</button>
		<button id="toTiggle">切换</button>
		<button id="tofadeIn">淡入</button>
		<button id="tofadeOut">淡出</button>
		<button id="toslide">滑动</button>
		<div id="context"></div>
	</body>
</html>