jQuery介绍

最新推荐文章于 2022-02-27 12:39:12 发布

qq_45234040

最新推荐文章于 2022-02-27 12:39:12 发布

阅读量120

点赞数

分类专栏：尝试文章标签： JQuery 学习笔记菜鸟

本文链接：https://blog.csdn.net/qq_45234040/article/details/96212491

版权

尝试专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery介绍

1.jQuery的认识

jQuery是继prototype原型之后又一个优秀的JavaScript框架(jquery.js库)。
特点：
1）具有独特的链式语法和短小清晰的多功能接口；
2）具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
3）拥有便捷的插件扩展机制和丰富的插件；
4）兼容性强
jQuery的核心思想:写得更少，做得更多（Write less do more）

2.jQuery的使用

1）正确引入script

2）页面加载事件
在这里插入图片描述
3）jQuery===$
/调用标签/
$(“p”).html(“标签已启用”)

	//用jQuery代替$
	jQuery("p").html("用jquery代替$")
	
	以上两个指令效果一致

4）DOM对象与jQuery对象转换
//获取jQuery对象
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").html("已启\dots$ ("#test");
console.log(i);

		console.log("--------------");
		//转换为document对象
		console.log(i[0]);
		i[0].innerHTML="发热个人";
		
		//获取document对象
		var m=document.getElementById("test");
		
		//将document对象转化为jQuery对象
		var mm=$(m);
		mm.html("转换成功")

3.jQuery的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--正确引入jquery-->
		<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript">
		$(function(){
			//用id确定对象
			/*$("#test").css("color","crimson");*/
			
			//用样式选择器确定对象
			/*$(".cl1").css("color","coral");*/
			
			//用元素选择器确定对象
			/*$("p").css("color","aqua");*/
			
			//所有控件
			/*console.debug($("*"));*/
			
			//selector1选择器
			/*$("li1,div").css("color","blue");*/
			
			//层次选择器:祖先 后代:$("#book li")指的是book以下所有的li标签，甚至包括li标签下面的所有内容
			/*$("#book li").css("color","coral");*/
			
			//层次选择器:父亲 儿子
			//$("#book > li").css("color","aqua")
			
			//元素 紧接下一个元素
			//$("div+li").css("color","brown");
			
			//div元素 下面的所有li元素
			$("div~li").css("color","aqua");
		});
		
</script>
		<title></title>
	</head>
	<body>
		<p id="test" class="cl">周一</p>
		<p id="test1" class="cl1">周二</p>
		<p id="test2" class="cl1">周三</p>
		<li1 id="test3">周四</li1>
		<div id="test4">周五</div>
		
		
		<ul id="book">
		<li>西游记</li>
		<div>dsa</div>
		<li class="history">水许传</li>
		<li id="redDream">红楼梦</li>
		<li class="history">
			三国
			<ul>
				<li>魏</li>
				<li>蜀</li>
				<li>吴</li>
			</ul>
		</li>
		<p>孙菲菲如果</p>
		<li>烦人烦人</li>
	</ul>
	
	
	</body>
</html>

4.jQuery注册事件

/* jQuery注册事件方法：
1） $KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).click(func\dots$ (“#id”).on(“click”,function(){});
取消： $KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).off(“click\dots$ (“#id”).bind(“click”,function(){});
取消：$(“#id”).unbind(“click”);*/

5.jQuery中append的使用

append(content) 向每个匹配的元素内部追加内容。
content String(htmlString),Element(DOM), jQuery对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--正确引入jquery-->
		<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript">
		$(function(){
			//append(htmlstring/domElement/jqueryObj)
				
				//htmlString
				//$("#test").append("<li>天气不错</li>");
				
				//domElement
				/*var bb = document.createElement('b');
				bb.innerHTML ="今天是周二";
				$("#test").append(bb);*/
				
				//jqueryObj
				//$("#test").append($("#test2"));将#test2的内容剪切到#test
				//$("#test").append($("#test2").clone());将#test2的内容复制到#test
				
				
				$(".clone").click(function(){
					//clone(true)表示完全复制
				$("#p1 input").clone(true).appendTo($("#p2"));
				});
				
				$(".btn").click(function(){
					alert("成功");
				})
		});
		
</script>
		<title></title>
	</head>
	<body>
		<p id="test">测试</p>
		<li id="test1">天气</li>
		<b id="test2">周日</b>
		<br>
		<input type="button" class="clone" value="复制"/>
		<p id="p1">
		  <input type="button" class="btn" value="测试"/>
		</p>
		<p id="p2"></p>
	</body>
</html>

6.二级联动jQuery使用

页面：

<body>
		省份<select id="provinceSelect" onchange="getCity(this)">
		  </select>
		城市<select id="citySelect">
		 </select>
	</body>

JS：

<script type="text/javascript" src="/js/jquery-2.1.3.js" ></script>
		<script type="text/javascript">
		$(function(){
			function getProvince(){
				$.get("/list",function(result){
					var provinceSelect = $("#provinceSelect");
					provinceSelect.append("<option>--请选择--</option>");
					//需要返回字符串json 转换 对象json
					var jsonArr = JSON.parse(result);
					 for(var i=0;i<jsonArr.length;i++){
						var jsonObj = jsonArr[i];
						//取出省份idname
						var pid = jsonObj.id;
						var pname=jsonObj.name;
						provinceSelect.append("<option value='"+pid+"'>"+pname+"</option>");
					} 
				});
			}
			getProvince();
		});
		
		function getCity(src){
			//获取省份
			var pid = src.value;
			var citySelect = $("#citySelect");
			//根据id 发送ajax请求，获取城市
			$.get("/list",{"pid":pid},function(result){
				citySelect.empty();
				citySelect.append("<option>--请选择--</option>");
				var jsonArr = JSON.parse(result);
				for(var i=0;i<jsonArr.length;i++){
					var jsonObj = jsonArr[i];
					var cid = jsonObj.id;
					var cname=jsonObj.name;
					
					citySelect.append("<option value='"+cid+"'>"+cname+"</option>");
				}

				})
		}
		</script>

后台代码：

@WebServlet("/list")
public class ListCode extends HttpServlet {

	@Override
	public void service(ServletRequest req, ServletResponse resp) throws ServletException, IOException {
				resp.setContentType("text/html;charset=UTF-8");
				
				String pid = req.getParameter("pid");
				if(pid != null && !"".equals(pid)){
					List<City> cityList = City.getCity(Integer.valueOf(pid));
					JSON cityJson = JSONSerializer.toJSON(cityList);
					resp.getWriter().print(cityJson);
				}else{
					
					List<Province> provinceList = Province.getProvince();
					JSON json = JSONSerializer.toJSON(provinceList);
					System.out.println(json);
					
					resp.getWriter().print(json);
				}
	}
}

主要注意：json的使用，中文代码的乱码现象

qq_45234040

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery介绍

jQuery介绍1.jQuery的认识jQuery是继prototype原型之后又一个优秀的JavaScript框架(jquery.js库)。特点：1）具有独特的链式语法和短小清晰的多功能接口；2）具有高效灵活的css选择器，并且可对CSS选择器进行扩展；3）拥有便捷的插件扩展机制和丰富的插件；4）兼容性强jQuery的核心思想:写得更少，做得更多（Write less...
复制链接

扫一扫