JQuery简介

最新推荐文章于 2019-09-24 20:27:36 发布

gz153016

最新推荐文章于 2019-09-24 20:27:36 发布

阅读量300

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/gz153016/article/details/51594073

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<%@ 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">





<script type="text/javascript" src="/LearnJquery/jquery-1.5.1.js"></script>
<script type="text/javascript" >
/*
注意：jquery-1.5.1.js放的位置
function _hyz(){
var ele= $ ("#mydiv") ;
alert(ele.text());
alert(ele.html());
}
*/
//这里的内容会在文档加载完毕时执行
$(function(){
//alert(document.getElementById("notme"));

/*
1.id选择器
*/
//var ele= $ ("#notme");//id选择器和class选择器
//alert(ele.text());打印该元素的文本内容
//alert(ele.html());打印该元素的HTML内容

//2.元素选择器
//alert( $("div").length);
//元素选择器,查找所有的div元素，他返回一个jqery对象，但jquery对象包含多个dom元素

/*
3.类选择器


var ele= $ (".classone");
ele.text("88");//设置
//alert(ele.html());
*/
/*
4.属性选择器
*/
// alert($("[name]").length);有name属性的两个
//alert($("[name=age]").length);name属性值等于age
//$("[name=age]").val("hello");
// alert($("[selected=selected]").text("上海"));
//alert($("[selected=selected]").val())获取
//alert($("[selected=selected]").text());
//alert($(":selected").text());



/*
5.表单选择器

表单选择器指的是查询表单元素
1.$(":input"查询所用的表单元素)包括：input，textarea，select，button
2.$(":text")查询所有的<input type='text'
3.$(":password")查询所有的<input type='password'
4.$(":radio")查询所有的<input type='radio'
5.$(":checkbox")查询所有的<input type='checkbox'
等等
*/
/*
6.表单属性选择器

*/

//alert($(":input[name=name]").attr("id"));获取
//$(":input[name=name]").attr("value","dfafasfdsa");设置
//$("#mydiv").addClass("xxx");添加class样式
// alert("干掉");
// $("#mydiv").removeClass("xxx");
//alert("真干掉");
//$("#mydiv").css("display","none");
/*
7.遍历
*/
//alert($("option").val());只打印出一个值
//要想都打印出来，遍历
//$("option").each(function(){
//alert($(this).val());
//});

/*
7、事件：给某一个元素添加事件
focus(fn):得到焦点事件
blur(fn):失去焦点
mouseover(fn):鼠标进入元素事件
mouseout(fn):鼠标离开元素事件
change(fn):元素值改变事件
sbumit(fn):表单提交事件，只能添加表单元素，参数函数会在表单被提交时执行
shumit():提交表单，只能添加表单元素，表示提交表单
注解：fn是function
hover

$("#btn").click(function(){
alert("hello");
});


alert("fgd");


$("#gaozhen").addClass("xxx");
$("#gaozhen").hover(function (){$("#gaozhen").text("去死")},
function (){$("#gaozhen").text("喊喊")})

*/
//只能使用一次
$("#btn").bind("click",function(){
//给出元素绑定一个名为click的事件，等同于click()方法
alert("hello");
$("#btn").unbind("click");//解除当前元素上所有click事件
});


});

</script>
<style type="text/css">
.xxx{
border:1px solid red;
width:50px;
height:50px;
}
</style>
</head>

<body>
<div id="gaozhen" value="dfadsf">notme</div>


<input type="button" id="btn" value="按钮"/>
<a href="javascript:_hyz()">超链接</a>
<div id="notme" ><p>notme</p></div>

<div id="mydiv">mydivmydiv</div>

<div class="classone">classone</div>
<div class="classone">classtwo</div>
用户名:<input type="text" name="name" id="gaozhen"/></br>
年龄:<input type="text" name="age"/></br>
<input type="submit" value="登录"/>


<select name=education">
<option value="1" >小学</option>
<option value="2">中学</option>
<option value="3" selected="selected">大学</option>
</select>

<
</body>
</html>