JQuery初识

最新推荐文章于 2021-08-02 10:17:11 发布

煎饼果儿

最新推荐文章于 2021-08-02 10:17:11 发布

阅读量224

点赞数

分类专栏： HTML5 文章标签： HTML JQuery

本文链接：https://blog.csdn.net/weixin_44975452/article/details/102708485

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一，我的第一个JQuery脚本


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script language="javascript" src="jquery-3.4.1.min.js"></script>
		<!--或者
			<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
		-->
		<title></title>
	</head>
	<body>
		<script>
			$(document).ready(function(){
				alert("这里是JQuery吗？");
			});
		</script>
		
		
	</body>
</html>

二、JQuery对象与DOM对象的相互转换
（1）jquery对象转换为DOM对象

//[index]方式转换
			var $mr=$("#mr");
			var mr=$mr[0];
			alert(mr.value);
			//get(index)方式转换
			var $mr1=$("#mr1");
			var mr1=$mr1.get(0);
			alert(mr1.value);

（2）DOM对象转换为jquery对象

var mr2=document.getElementById("mr2");
			var $mr2=$(mr2);
			alert($(mr2).val());

三、jQuery选择器（jQuery库中非常重要的部分之一）

与传统的JavaScript获取页面元素和编写事物相比，jQuery选择器具有明显的优势，包括：
1、代码更简单
2、支持CSS1到CSS3选择器
3、完善的检测机制

-基本选择器
jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。

ID选择器(#id)
ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。
ID选择器的使用方法：

$("#id");
1
id为要查询元素的ID属性值。
【例】在页面添加一个ID属性值为testInput的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值
首先要先引入jQuery库

3.元素选择器(element)
元素选择器是根据元素名称匹配相应的元素。通俗地讲元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。
元素选择器的使用方法：
$(“element”);
1
【例】在页面中添加两个

标记和一个按钮，通过单击按钮来获取这两个

,并修改他们的内容。

	<div>这里种植了一颗草莓</div>
	<div>这里养了一条鱼</div>
	<input type="button" id="button" value="若干年后" />
	<script>
		$(document).ready(function(){
			$("#button").click(function(){				//为按钮绑定单击事件
				$("div").eq(0).html("这里长出了一片草莓");
				//获取第一个div元素
				$("div").get(1).innerHTML="这里的鱼没有了";
				//获取第二个div元素
			});
		});
	</script>

4.类名选择器(.class)
类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中可以有多个CSS类，一个CSS类又可以匹配多个元素，如果元素中有一个匹配的类的名称就可以被类名选择器选取到。
类名选择器的使用方法：

$(".class");

1
【例】在页面中，首先添加两个

标记，并为其中的一个设置CSS类，然后通过jQuery的类名选择器选取设置了CSS类的

标记，并设置其CSS样式

	<div class="myClass">注意观察我的样式</div>
	<div>我的样式是默认的</div>
	<script>
		$(document).ready(function(){
			var myClass=$(".myClass");					//选取DOM元素
			myClass.css("backgound-color","#C50210");	//为选取的DOM元素设置背景颜色
			myClass.css("color","#FFF");				//为选取的DOM元素设置文字颜色
		});
	</script>