jQuery 的简单使用（选择器，HTML，css）

本文介绍了如何自定义SQuery框架，并结合jQuery库实现ID选择器、标签选择器等，同时展示了如何操作元素的HTML和CSS。案例涵盖了DOM操作和基础的前端技术应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导包。

jquery-1.9.1.js的提取地址

链接：https://pan.baidu.com/s/1bxMxHg1i12KIyjL-3w3c5Q
提取码：w6ln

2.案例：自定义SQuery框架，写一些简单的方法

//新建一个js文件，将JQuery的代码复制进去，只留下

//(function( window, undefined ) {

//})( window );

//在中间添加自己的方法

//案例代码

(function( window, undefined ) {
	String.prototype.addinfo=function (){
		document.write("加法"+"<br />");
	}
	String.prototype.subinfo=function (){
		document.write("减法"+"<br />");
	}
	String.prototype.mulinfo=function (){
		document.write("乘法"+"<br />");
	}
	String.prototype.divinfo=function (){
		document.write("除法"+"<br />");
	}
	String.prototype.insinfo=function (){
		document.write("增加方法"+"<br />");
	}
	String.prototype.delinfo=function (){
		document.write("删除方法"+"<br />");
	}
	String.prototype.updinfo=function (){
		document.write("修改方法"+"<br />");
	}
	String.prototype.selinfo=function (){
		document.write("查询方法"+"<br />");
	}
})( window );

导入自定义的SQuery框架，调用里面的方法

//src="需要导入的js文件"，
<script src="js/Zquery.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<script type="text/javascript">
			var str = "";//定义一个数组，调用导入的js文件中的函数(方法)
			str.addinfo();
			str.subinfo();
			str.mulinfo();
			str.divinfo();
			str.insinfo();
			str.delinfo();
			str.updinfo();
			str.selinfo();
		</script>
	</body>

3.案例：JQuery选择器（ID选择器，标签选择器，类选择器，组合选择器，层级选择器，）

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<input type="button" value="测试Id选择器" onclick="testId()"/>
		<input type="button" value="测试Id选择器02" onclick="testID02()"/>
		<input type="button" value="测试Id选择器03" onclick="testID03()"/>
		<input type="button" value="测试Id选择器04" onclick="testID04()"/>
		<input type="button" value="标签选择器" onclick="testLabel()"/>
		<input type="button" value="类选择器" onclick="testClass()"/>
		<input type="button" value="组合选择器" onclick="testAll()"/>
		<input type="button" value="层级选择器" onclick="testCj()"/>
		<input type="button" value="子选择器" onclick="testChild()"/>
		<hr />
		<!--ID选择器-->
		<input type="text" value="后边会用Jquery做各种小练习" id="textID"/>
		<hr />
		<input type="text" value="菊花关" id="jhgID"/>
		<hr />
		<input type="text" value="老鬼" id="lgID"/>
		<hr />
		<input type="text" value="昊天锤" id="htID"/>
		<!--类选择器-->
		<input type="text" value="zql" class="zqlclass"/>
		<input type="text" value="zql02" class="zqlclass"/>
		<input type="text" value="zql03" class="zqlclass"/>
		<hr />
		<!--子选择器-->
		<div id="divID">
			<input type="text" value="盖浇饭"/>
			<input type="text" value="油泼面"/>
			<input type="text" value="饺子"/>
		</div>
		<script type="text/javascript">
			//ID选择器
			function testId(){
				//通过Jquery方法，拿到id编号为textID的对象
				var result =window.jQuery("#textID");
				//用val(),将textID中“value属性”对应的值，现在对话框中
				alert(result.val());
			}
			function testID02(){
				var jhg = jQuery("#jhgID");
				alert(jhg.val());
			}
			//注意事项：$和jQuery一样 
			function testID03(){
				var lg = window.$("#lgID");
				alert(lg.val());
			}
			function testID04(){
				alert($("#htID").val());
			}
			//标签选择器
			function testLabel(){
				var result = window.$("input");
				for(var i= 0;i<result.length;i++){
					document.write(result[i].value+"<br />");
				}
			}
			//类选择器
			function testClass(){
				var result = window.$(".zqlclass");
				for(var i= 0;i<result.length;i++){
					document.write(result[i].value+"<br />");
				}
			}
			//组合选择器
			function testAll(){
				var result = $("input,hr");//获取页面中所有的input元素，和hr元素，
				for(var y=0;y<result.length;y++){
					document.write(result[y].value+"<br />");
				}
			}
			//层次选择器
			function testCj(){
//				var result = window.$("input:first");//获取，页面中第一个input元素
//				alert(result.val());
//				result = window.$("input:last");//获取，页面中最后一个input元素
//				alert(result.val());
				result = window.$("input:eq(1)");//获取指定位置的input元素eq(num从0开始)
				alert(result.val());
			}
			//子选择器
			function testChild(){
				var result = $("#divID>input");//获取id为divID的元素里面，所有input元素
//				alert(result.length);
//				alert(result[0].value);
//				alert(result[1].value);
//				alert(result[2].value);
				for(var i=0;i<result.length;i++){
					document.write(result[i].value+"<br />");
				}
			}
		</script>

4.案例：操作元素HTML

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<h1>操作元素HTML</h1>
		<input type="button" id="btn1" value="获取元素内容---HTML" onclick="butt1()"/>
		<input type="button" id="btn1" value="修改元素内容---HTML" onclick="butt2()"/>
		<div id="divD">
			<p>这是一个DIV标签</p>
		</div>
		<script type="text/javascript">
			function butt1(){
				//$('p').html();//获取p元素里的内容
				var divtext = window.jQuery("#divD>p");
				alert(divtext.html());
			}
			function butt2(){
				//往p元素中添加内容
				//$("p").html("Hello <b>world</b>!");
				var divtext = window.jQuery("#divD>p");
				//divtext.html("这是一个DIV标签,332255");
				divtext.html(divtext.html()+"332255");
			}
		</script>
	</body>

5.案例：操作样式--css

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<input type="button" id="btn1" value="操作样式--css" onclick="btndiv()"/>
		<div id="divid" style="background-color: red; width: 300px; height: 300px; border: 2px solid;" >
			
		</div>
		<div id="" style="background-color: yellow; width: 300px; height: 300px; border: 2px solid;">
			我是DIV01
		</div>
		<script type="text/javascript">
			function btndiv(){
//				window.$("#divid").css("background","yellow");
                                //两种方式都可以实现，background-color 显的更为严谨
                                window.$("#divid").css("background-color","yellow");
			}
		</script>
	</body>