学习日记之JQuery小知识

hackcat

2015-01-17

<%@ 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 'jq1.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="/jquerytest/jquery-1.5.1.js"></script>
  <script type="text/javascript">
  //这里的内容会在文档加载完毕时执行
  $(function() {
//  var ele = $("#mydiv"); //id选择器，返回一个jquery对象
//	alert(ele.html());
//	var ele = $("div"); //元素选择器，查找所有的div元素， 返回一个jquery对象,但jquery中包含多个dom对象
//	$(".mydiv").text("wuwuwuwu");;//类选择器
//	alert($("[name]").length); //属性选择器
//	alert($("[name=name]").length); //属性选择器,属性名为pwd
//	alert($("[name]").val()); //获取文本框中的值
//	$("[name=name]").val("dajsdaks"); //向文本框中赋值
//	alert($(":selected").text()); //属性选择器

//	alert($(":input[name=name]").attr("id"));//获取id
//	$(":input[name=name]").attr("value","djjaskdj");//设置指定属性的值
//	$(":input[name=name]").removeAttr("name");//删除指定属性的值

//	$("#yourdiv").addClass("xxx"); //添加样式
//	alert("移除");
//	$("#yourdiv").removeClass("xxx");//移除样式
//	$("#yourdiv").css("display","none");//css不如添加样式类

//	$("option").each(function() { //遍历元素
//		alert($(this).val());
//	});
//	$("#btn").click(function() { //绑定事件，等同于$("#btn").bind("click",function(){  });
//	$("#btn").unbind("click"); //解除当前元素上的所有事件，可做一次性按钮

//		$("form").submit();
//	});	
	$("#d2").hover(
		function() { //鼠标进入元素
			$("#d2").text("哈利路亚");
		},
		function() { //鼠标移出元素
			$("#d2").text("阿门");
		}
	);
});
  </script>
  <style type="text/css">
  .xxx{
  	border: 1px solid red;
  	width: 100px;
  	height: 100px;
  }
  </style>
  </head>
  <body>
    This is my JSP page. <br>
    <div id="notme"><p>abc</p></div>  <!-- id选择器 -->
    <div class="mydiv">123</div>	  <!-- 类选择器 -->
 用户名：<input type="text" id="xxx" name="name"/> <!-- 属性选择器 -->
 学历：
 <select>
 <option value="1">大学</option>
 <option value="2">高中</option>
 <option value="3">初中</option>
 <option value="4" selected="selected">小学</option>
 </select>
 
 <div id="yourdiv">hello</div>
 <input type="button" value="提交" id="btn" />
 <form action="http://www.jd.com"></form>
 <div id="d2" class="xxx">hahahah</div>
  </body>
</html>

string jquery