Jquery

最新推荐文章于 2022-03-28 10:57:04 发布
最新推荐文章于 2022-03-28 10:57:04 发布
阅读量789 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yantingmei/article/details/21457083
版权

jQuery概述

功能：

方位页面框架的局部

修改页面的表现

更改页面的内容

响应事件

为页面添加动画

与服务器异步交互

简化常用的JavaScript操作

使用jquery需要导入js文件

jquery-1.10.1.js，jquery.min.js


jQuery

选择器：选择页面中的某一类元素或某个元素

H2 a{  添加CSS属性 }

调用jQuery

${“ h2 a ”}

 

2.html

<!DOCTYPE html>
<html>
<head>
<title>jquery选择器</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="jquery-1.10.1.js"></script>
<script language="javascript">
	window.onload = function() {
		//选择匹配元素
		var oElements = $("h2 a"); //选择匹配元素
		for ( var i = 0; i < oElements.length; i++)
			oElements[i].innerHTML = i.toString();

		//jquery去空格,trim() 清理空格

		/* 	var str="123 457 89 ";
			var jstr=$.trim(str);
			alert(jstr.length);
			
			
			var s=jstr.split(" ");
			var ss="";
			for(var i=0;i<s.length;i++){
				ss=ss+s[i];
			}
			alert(ss.length); */

		//添加文字, 创建DOM元素
		/* 	var o=$("<p>这是一个感人肺腑的故事</p>");
		
		o.insertAfter("#new");
		 */

	}
</script>
</head>

<body>
	<p id="new"></p>
	<h2>
		<a href="#">正文</a>内容
	</h2>
	<h2>
		正文<a href="#">内容</a>
	</h2>
</body>
</html>


3.html


<!DOCTYPE html>
<html>
<head>
<title>jquery属性选择器</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->



<style type="text/css">
<!--
a {
	text-decoration: none;
	color: #000000;
}

.myClass { /* 设定某个CSS类别 */
	background-color: #d0baba;
	color: #5f0000;
	text-decoration: underline;
}
-->
</style>

<script src="jquery-1.10.1.js"></script>

<script language="javascript">
$(function(){
	function  change(title) {
		//属性选择器:[ ] 匹配给定的属性是某个特定值的元素：$("a[href=10-9.html]").addClass("myClass");
		//$("a[id=my]").addClass("myClass");//直接匹配
		//$("a[href^=10-8]").addClass("myClass");//开头匹配
		//$("a[name$=csdn]").addClass("myClass");//结尾匹配
		//$("a[name*=csdn]").addClass("myClass");//内容包含匹配

		
		//包含选择器:$("ul li ul li:has(a)")
		//$("ul li ul li:has(a)").addClass("myClass");

		
		//位置选择器:$("p:lt(2)")
		// $("ul li ul li:gt(1)").addClass("myClass");//从0开始

		
		//过滤选择器:$("input[name="+oCheckBox+"]
		//var title = "圆角矩形";
		//$("ul li ul li  a[title="+title+"]").addClass("myClass");		
		
	}
		//反向过滤选择器$(":input:not(:checkbox):not(:radio)")
        //$("ul li ul li a[name]:not(javacsdn)").addClass("myClass");//得到了所有的name属性的选择器
        $("ul li ul li a:not([name=a])").addClass("myClass");//正确
        
});
</script>
</head>

<body>
<input  type="button"  οnclick="change('圆角矩形')"   value="点击我">
	<ul>
		<li><a href="http://picasaweb.google.com/isaacshun">isaac
				photo</a>
			<ul>
				<li>10-6.html</li>
				<li><a id="my" href="10-7.html">10-7.html</a></li>
				<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
				<li><a name="javacsdn" href="10-9.html">10-9.html</a></li>
				<li><a name="a" href="10-9.html">10-9111.html</a></li>
				<li><a name="ss" href="10-9.html">1.html</a></li>
				<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
			</ul></li>
	</ul>

</body>
</html>


管理选择器结果

5.html

<!DOCTYPE html>
<html>
<head>
<title>size()方法</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
<!--
html {
	cursor: help;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

div {
	border: 1px solid #003a75;
	background-color: #FFFF00;
	margin: 5px;
	padding: 20px;
	text-align: center;
	height: 20px;
	width: 20px;
	float: left;
}
-->
</style>
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
	//1.$("div").size()得到数量
	//2.(document.body).append()//追加节点
	//3.$("span").html(i);修改显示
	document.onclick = function() {
		var num = $("div").size() + 1;
		$(document.body).append("<div>" + num + "</div>");
		$("span").html(num);
	};
</script>
</head>

<body>
	页面中一共有
	<span>0</span>个div块。点击鼠标添加div：
</body>
</html>


6.html


<!DOCTYPE html>
<html>
<head>
<title>get()方法</title>
<style type="text/css">
<!--
div{
	border:1px solid #003a75;
	color:#CC0066;
	margin:5px; padding:5px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	height:20px; width:20px;
	float:left;
}
-->
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	//$("div").get();//得到处理函数
	//aDiv.reverse();//反序，传给处理函数
	

	var divs=$("div").get();
	divs.reverse();
	//在最后div上追加
	for(var i=0;i<divs.length;i++){
	     //$("div:last").append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"))//divs[i]);jquery-1.10.1.js::::迭代 ，，，  jquery.min.js::;;横行
		$(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));//jquery-1.10.1.js和  jquery.min.js都是横行
	}
});
</script> 
</head>

<body>
	<div style="background:#FFFFFF">1</div>
	<div style="background:#CCCCCC">2</div>
	<div style="background:#999999">3</div>
	<div style="background:#666666">4</div>
	<div style="background:#333333">5</div>
	<div style="background:#000000">6</div>
</body>
</html>



7.html

<!DOCTYPE html>
<html>
<head>
<title>index(element)方法</title>
<style type="text/css">
<!--
body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

div {
	border: 1px solid #003a75;
	background: #fcff9f;
	margin: 5px;
	padding: 5px;
	text-align: center;
	height: 20px;
	width: 20px;
	float: left;
	cursor: help;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
	$(function() {
		 //click()添加点击事件
		$("div").click(
			function(){
				var i=$("div").index(this);
				$("span").html(i.toString());
			}
	    ) 
	});
</script>
</head>
<body>
	<div>0</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	点击的div块序号为：
	<span></span>
</body>
</html>



用ajaxSend()方法创建全局Ajax发送事件

UserAction.java

package action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class UserAction  extends ActionSupport {
    private String name;
    private String pass;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	@Override
	public String execute() throws Exception {
		
		return SUCCESS;
	}
	public void check() throws IOException, InterruptedException{
		System.out.println(name);
		if(name!=null && !name.trim().equals("")){
			HttpServletResponse response=ServletActionContext.getResponse();
			response.setContentType("text/html");
			response.setCharacterEncoding("UTF-8");
			PrintWriter out=response.getWriter();
			Thread.sleep(1000);
			
			if(name.equals("yan")){
				out.print("用户名被占用");
			}else{
				out.print("用户名可用");
			}
		}
	}
}

Struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>

	<package name="hello" namespace="/hello" extends="struts-default">
		<action name="hello" class="action.UserAction" method="check">
			<result name="success">
				/index.jsp
			</result>
		</action>
	</package>
</struts>

Index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">

   $(function(){
	   $("#UserResult").ajaxSend(
       function(){
    	   $(this).html("<font style='background:#990000; color:#FFFFFF;'>loading... </font>");

       }
    );
   });
   

	function startCheck(name) {
		$.ajax({
			type : "GET",
			data : {
				"name" : name.value
			},
			url : "http://localhost:8080/sina/hello/hello",
			
			success : function(data) {
				$("#UserResult").html(data);
			},
			dataType:"text"
		});
	}
</script>
</head>

<body>
	<form name="register">
		<table cellpadding="5" cellspacing="0" border="0">
			<tr>
				<td>用户名:</td>
				<td><input type="text" οnblur="startCheck(this)" name="name"></td>
				<td><span id="UserResult"></span></td>
			</tr>
			<tr>
				<td>输入密码:</td>
				<td><input type="password" name="passwd1"></td>
				<td></td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="password" name="passwd2"></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="注册">
					<input type="reset" value="重置"></td>
				<td></td>
			</tr>
		</table>
	</form>

</body>
</html>




闫梅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery
CJW的博客
07-28 9612
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 4018
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery 遍历对象
m0_67458498的博客
03-28 4203
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-1.9.1.js
09-07
jquery-1.9.1版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery-3.6.0
09-06
jquery-3.6.0
Jquery-3.7.1.min.js
最新发布
01-22
Jquery-3.7.1.min.js
Jquery 本地版引用文件 适配3.6.1版本
11-15
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.1.min.js"> 官网jquery压缩版引用地址: <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> 下载后更改文件名，匹配引用连接...
jQuery1.11.0_20140330_jquery_
10-02
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM ...
jQuery-3.6.0.min.js
11-14
jQuery-3.6.0.min.js
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值