jQuery

最新推荐文章于 2023-04-09 10:59:39 发布

CJQ余小C

最新推荐文章于 2023-04-09 10:59:39 发布

阅读量384

点赞数

本文链接：https://blog.csdn.net/CJQYQX/article/details/97338728

版权

一、入门

1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”

2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

3. hello jQuery
3.1 导入js库（）
在这里插入图片描述
在jsp页面导入jquery：

 <scripttype=“text/javascript"src=”${pageContext.request.contextPath}/js/jquery.min.js">

3.2 $(fn)做为程序入口

4. jQuery三种工厂方法（demo2.jsp）
index2.jsp界面:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
 $(function () {
  //利用a标签获取实例 标签选择器
  /* $("a").click(function () {
   alert("标签选择器");
  }) */
  //利用id=a3获取实例 id选择器
  /*  $("#a3").click(function () {
  alert("id选择器");
 })  */
  //类选择器
  /* $(".c2").click(function () {
   alert("类选择器");
  }) */
  
  // 包含选择器
  /* $("p a").click(function () {
   alert("包含选择器");
  }) */
  
  //组合选择器
  /* $("a,span").click(function () {
   alert("组合选择器");
  }) */
  
  
  //第二个参数的作用（在div标签的内部寻找a标签，给找到的a标签添加事件）
  //如果第二个参数没有填写，默认是document（整个文档）
  $("a","div").click(function () {
   alert("组合选择器");
  })
 })
</script>
<title>Insert title here</title>
</head>
<body>
 <p>
 <a id = "a1" class ="c1" href="#">点我1</a>
 </p>
 <p>
 <a id = "a2" class ="c2" href="#">点我2</a>
 </p>
 <p>
 <a id = "a3" class ="c3" href="#">点我3</a>
 </p>
 <div>
 <a id = "a4" class ="c4" href="#">点我4</a>
 </div>
 <div>
 <p>
 <a id = "a5" class ="c5" href="#">点我5</a>
 </p>
 </div>
 <span>点我6</span>
</body>
</html>

4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器，css选择器
标签选择器
ID选择器
类选择器
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp

<script type="text/javascript">
 $(function() {
  
  //利用a标签获取jquery实例
  /* $("a").click(function() {
   alert("点你怎么了？");
  }); */
  
  //利用id选择器#获取jquery实例
  /* $("#a2").click(function() {
   alert("点你怎么了？");
  }); */
  
  //利用类选择器.获取jquery实例
  /* $(".c3").click(function() {
   alert("点你怎么了？");
  }); */
  
  //包含选择器：p a  p标签里面包含a标签 就能弹框
  /* $("p a").click(function() {
   alert("点你怎么了？");
  }); */
  
  //组合选择器
  /* $("a,h1").click(function() {
   alert("点你怎么了？");
  }); */
  
  //在div标签下 寻找a标签 如果找到的话 就给a标签添加属性
  //如果第二个参数没填 默认为document
  /* $("a","div").click(function() {
   alert("点你怎么了？");
  }); */  // 自定义选择器
  $(":input[name='name1']").click(function() {
   alert(1);
  });
  
 })
 </script>

4.2 jQuery(html) （demo3.jsp）
html：基于html的一个字符串

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
   
 $(":input[name='name1']").click(function () {
  //在id=selld1 的select的jquery实例上追加自定义的html jquery实例
  $("#selId1").append("<option value='1'>湖南</option>")
 })
  //将自定义的htmljquery实例追加到id=selld2的select的jquery实例上
 $(":input[name='name2']").click(function () {
  $("<option value='1'>长沙</option>").appendTo("#selId2");
 })
})
</script>
<title>Insert title here</title>
</head>
<body> <select id="selId1">
  <option value="-1">---请选择---</option>
 </select>
 <select id="selId2">
  <option value="-1">---请选择---</option>
 </select>
 <input name="name1" value="add1" type="button">
 <input name="name2" value="add2" type="button">
 
 <input type="hidden" id="h1" value="h1">
 <input type="hidden" id="h2" value="h2">
 <input type="hidden" id="h3" value="h3"></body>
</html>

4.3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
注1：$就是jQuery简写

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type=

最低0.47元/天解锁文章

CJQ余小C

关注

0
点赞
踩
0

收藏

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

一、入门1. 什么是jQuery它是一个轻量级的javascript类库注1：就一个类“jQuery”，简写“$”2. jQuery优点2.1 总是面向集合2.2 多行操作集于一行3. hello jQuery3.1 导入js库（）在jsp页面导入jquery： <scripttype=“text/javascript"src=”${pageContext.reques...
复制链接

扫一扫