jQuery学习

最新推荐文章于 2024-05-05 09:15:00 发布

原创最新推荐文章于 2024-05-05 09:15:00 发布 · 182 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文深入浅出地介绍了jQuery的基本概念，包括其作为JavaScript框架的角色、DOM操作、选择器的使用、事件处理及AJAX应用。通过实例展示了如何利用jQuery简化网页开发，实现动态效果和数据交互。

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

注：博客内容并不是那么全面，了解更多请点击这里！

jQuery入门

什么是jQuery？
jQuery可以说是Javascript的一个框架，也可以说是JavaScript的函数库，封装了大量的方法
JQuery和DOM的要点
jQuery和DOM对象不可以直接调用进行使用，但是可以通过内部的机制进行对象之间的转换
导入jQuery库(jquery-1.12.4.js)

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>

jQuery的使用（三种方式）
注意：为方便使用，$符号是jQuery中代替jQuery对象的符号

<script type="text/javascript">
	// 第一种
	$(function(){
		
	});
	// 第二种
	jQuery(function(){
		
	});
	// 第三种
	window.jQuery(function(){
		
	});
</script>

dom对象和jQuery对象的相互转换

<script type="text/javascript">
	<!-- dom转jQuery对象 -->
	$(function(){
		// 得到dom对象
		var dom_uname = document.getElementById("username");
		alert(dom_uname.value);
		// 转换
		var jquery_uname = $(dom_uname);
		alert(jquery_uname.val());
	});
</script>

<script type="text/javascript">
	<!-- jQuery转dom对象 -->
	$(function(){
		// 得到jQuery对象
		var jquery_uname = $('#username');
		alert(jquery_uname);//[object Object]
		alert(jquery_uname.val());
		// 转换(jQuery对象实质为数组对象，存的是dom对象)
		var dom_uname = jquery_uname[0];
		alert(dom_uname.value);
	});
</script>

在这里插入图片描述

选择器

案例：

<body>
    <div> 
    	<input type="text" class="class_username" id="id_username" value="zhangsan"/>
    	<input type="text" class="class_username" id="id_username" value="lisi"/>
    </div>
    <input type="text" id="id_password" value="123456"/>
    <input type="text" id="id_password" value="654321"/>
</body>

id选择器

<script type="text/javascript">
	$(function(){
		alert($('#id_username').length);// 1
		alert($('#id_username').val());// zhangsan	
	}); 
</script>

class选择器

<script type="text/javascript">
	$(function(){
		alert($('.class_username').length);// 2
		// 注意：不指定取数组中那个数据，默认为第一个
		alert($('.class_username').val());// zhangsan
		// 取数组中的第二个数据，过程：jquery->dom->jquery
		alert($($('.class_username')[1]).val());
	}); 
</script>

element选择器

<script type="text/javascript">
	$(function(){
		alert($('input').length);// 4
		alert($('input').val());// zhangsan
	}); 
</script>

parent > child选择器

<script type="text/javascript">
	// 得到给定元素的所有给定子元素
	$(function(){
		alert($('div > .class_username').length);// 2
	}); 
</script>

prev + next选择器

<script type="text/javascript">
	// 得到给定元素的下个元素
	$(function(){
		alert($('.class_username + #id_username').length);
		alert($('.class_username + #id_username').val());
		alert($('div + #id_password').val());
	}); 
</script>

prev ~ siblings选择器

<script type="text/javascript">
	// 得到给定元素之后的所有指定元素
	$(function(){
		alert($('div ~ #id_password').length);// 2
	}); 
</script>

简单过滤选择器（如：odd，even，first，last等），有兴趣可以了解点击
属性选择器
案例：

<body>
	<div id="div1" class="class_div1">div1</div>
	<div id="div2">div2</div>
	<div id="div3">div3</div>
	<div class="div4">div4</div>
	<input type="text" id="input_letter"/>
</body>

	<script type="text/javascript">
		$(function(){
			// 查询所有含id属性的div标签
			alert($('div[id]').length);//3
			// 查询含有class属性且值等于指定值的div标签
			alert($("div[class='class_div1']").length);//1
			// 不等于
			alert($("div[class!='class_div1']").length);//3
			// 查询id值为div开头的标签
			alert($("div[id^='div']").length);//3
			// 查询id值以letter结尾的input标签
			alert($("input[id$='letter']").length);//1
			// 查询id值包含iv的div标签
			alert($("div[id*='iv']").length);//3
		});
	</script>

属性操作

val属性操作

<body>
    <input type="text" class="acount" id="username" value="zhangsan"/><br>
    <input type="text" class="acount" id="password" value="123456"/>
</body>

<script type="text/javascript">
	$(function(){
		// 得到value值
		alert($('#username').val());
		// 设置值
		$('#username').val("lisi");
	});
</script>

在这里插入图片描述

html&text属性

  <body>
    <div id="div1"><a href="#">div1</a></div>
  </body>

<script type="text/javascript">
	$(function(){
		// 得到值
		alert($("#div1").text());//div1
		alert($("#div1").html());//<a href="#">div1</a>
		// 设置值
		$("#div1").text("new set text");
		alert($("#div1").text());
		// 自动编译
		$("#div1").html("<font color='red'>new set html<font>");
		alert($("#div1").text());//new set html
		alert($("#div1").html());//<font color='red'>new set html<font>
	});
</script>

在这里插入图片描述

class属性

<style type="text/css">
	.style1{
		background-color: red;
	}
	.style2{
		background-color: blue;
	}
	.style3{
		background-color: yellow;
	}
	.style4{
		color: white;
	}
</style>

  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
  </body>

<script type="text/javascript">
	$(function(){
		$('#div1').addClass('style1');
		// 添加不同的css
		$('#div2').addClass('style2 style4');
		$('#div3').addClass('style3');
		// 移除css
		$('#div2').removeClass('style2');
		// 若存在添加，不存在移除
		$('#div2').toggleClass('style2');
	});
</script>

在这里插入图片描述

attr属性

  <body>
    <a id="a0" href="https://www.google.com">this is google</a>
    <a id="a1">this is youtube</a>
    <a id="a2">this is baidu</a>
  </body>

<script type="text/javascript">
	$(function(){
		// 得到某个属性的值
		alert($('#a0').attr('href'));// https://www.google.com
		// 设置某个属性的值（可以设置多个属性值，用逗号分割每个属性）
		$('#a1').attr({href:'https://www.youtube.com/'});
		// 设置某个属性的值
		$('#a2').attr('href','https://www.baidu.com/');
	});
</script>

在这里插入图片描述

文档处理_1(元素内部)

案例：

  <body>
    <p style="color: red">文本</p>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
  </body>

append()：向每个匹配的元素内部追加内容。

<script type="text/javascript">
	$(function(){
		<!-- 下面这些都是在元素内部进行操作中 -->
		// 向每个匹配的元素内部追加内容。
		$('#div1').append("div1");
		$('#div2').append("div2");
		$('#div3').append("div3");
		$('#div1').append("<a href='#'>我是div1后追加的链接</a>");
	});
</script>

在这里插入图片描述

appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中。

<script type="text/javascript">
	$(function(){
		<!-- 下面这些都是在元素内部进行操作中 -->
		// 向每个匹配的元素内部追加内容。
		$('#div1').append("div1");
		$('#div2').append("div2");
		$('#div3').append("div3");
		$('#div1').append("<a href='#'>我是div1后追加的链接</a>");
		// 把所有匹配的元素追加到另一个指定的元素元素集合中。
		$('p').appendTo('#div3');
	});
</script>

在这里插入图片描述

prepend()：向每个匹配的元素内部前置内容。

<script type="text/javascript">
	$(function(){
		<!-- 下面这些都是在元素内部进行操作中 -->
		// 向每个匹配的元素内部追加内容。
		$('#div1').append("div1");
		$('#div2').append("div2");
		$('#div3').append("div3");
		$('#div1').append("<a href='#'>我是div1后追加的链接</a>");
		// 把所有匹配的元素追加到另一个指定的元素元素集合中。
		$('p').appendTo('#div3');
		// 要插入到目标元素内部前端的内容
		$('#div1').prepend("我要加到div1前边<br>");
	});
</script>

在这里插入图片描述

prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。

<script type="text/javascript">
	$(function(){
		<!-- 下面这些都是在元素内部进行操作中 -->
		// 向每个匹配的元素内部追加内容。
		$('#div1').append("div1");
		$('#div2').append("div2");
		$('#div3').append("div3");
		$('#div1').append("<a href='#'>我是div1后追加的链接</a>");
		// 要插入到目标元素内部前端的内容
		$('#div1').prepend("我要加到div1前边<br>");
		// $(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
		$('p').prependTo('#div3');
	});
</script>

在这里插入图片描述

文档处理_2 （元素外部&其它）

案例：

  <body>
    <p style="color: red">文本</p>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>

after()：在每个匹配的元素之后插入内容。

<script type="text/javascript">
	$(function(){
		$('#div1').after("div1之后添加的！");
	});
</script>

在这里插入图片描述

before()：在每个匹配的元素之前插入内容。

<script type="text/javascript">
	$(function()
		$('#div4').before("div4之前添加的！");
	});
</script>

在这里插入图片描述

insertAfter()：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

<script type="text/javascript">
	$(function(){
		$('#div1').after("div1之后添加的！");
		$('#div4').before("div4之前添加的！");
		// 将p标签添加到指定属性之后
		$('p').insertAfter('#div2');
	});
</script>

在这里插入图片描述

insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

<script type="text/javascript">
	$(function(){
		$('#div1').after("div1之后添加的！");
		$('#div4').before("div4之前添加的！");
		// 将p标签添加到指定属性之前
		$('p').insertBefore('#div2');
	});
</script>

在这里插入图片描述

empty()：删除匹配的元素集合中所有的子节点。

<script type="text/javascript">
	$(function(){
		$('p').empty();
	});
</script>

在这里插入图片描述

remove()：从DOM中删除所有匹配的元素。

<script type="text/javascript">
	$(function(){
		// 注意：p标签一同移除！！！
		$('p').appendTo('#div1');
		$("div[id='div1']").remove('#div1');
	});
</script>

在这里插入图片描述

事件

注：事件较多，此处不详细介绍，有兴趣了解的点击
在这里插入图片描述

AJAX

注：这里只演示jQuery封装的相对来说最底层的方法（$.ajax），想了解封装的其它方法请点击
在这里插入图片描述
案例：

  <body>
    <form id="form1">
    	<input type="text" id="username" name="username"/><br>
    	<input type="text" id="password" name="password"/><br>
    	<input type="button" id="btn" value="login">
    </form>
  </body>

<script type="text/javascript">
	$(function(){
		$('#btn').bind('click', function(){
			// 获取表单数据
			var i = $('#form1').serializeArray();
			//alert(i);
			$.ajax({
				// 请求链接
				url: "user_login.action",
				// http方法
				type: "POST",
				// 期待服务器返回的数据类型
				dataType: "json",
				data: i,
				// 异步请求
				async: true,
				// 成功后回调的方法
				success: function(data){
					alert(data.msg);
				}, 
				// 失败后回调的方法（服务器故障）
				error: function(data){
					al
				}	
			});
		});
	});
</script>

package tqb.web.action;

import java.util.HashMap;
import java.util.Map;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

import net.sf.json.JSONObject;

/**
 * 用户登录Demo
 * @author tqb
 *
 */
public class DemoAction extends ActionSupport {

	public String login() throws Exception {
		Map<String, String> map = new HashMap<String, String>();
		try {
			// 模拟服务器发生故障！！！
			// System.out.println(1/0);
			String username = ServletActionContext.getRequest().getParameter("username");
			String password = ServletActionContext.getRequest().getParameter("password");
			if (username != null && password != null && username.trim().equals("admin")
					&& password.trim().equals("admin")) {
				map.put("msg", "恭喜你登录成功！");
				JSONObject jsonObject = JSONObject.fromObject(map);
				ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
				ServletActionContext.getResponse().getWriter().print(jsonObject);
			} else {
				map.put("msg", "抱歉，登录失败！");
				JSONObject jsonObject = JSONObject.fromObject(map);
				ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
				ServletActionContext.getResponse().getWriter().print(jsonObject);
			}
		} catch (Exception e) {
			map.put("msg", "抱歉，服务器发生故障！");
			JSONObject jsonObject = JSONObject.fromObject(map);
			ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
			ServletActionContext.getResponse().getWriter().print(jsonObject);
			e.printStackTrace();
		}
		return NONE;
	}

}