Jquery简介 选择器
Jquery简介
jQuery是John Resig建立的一个轻量级javascript库.
兼容CSS3，还兼容各种浏览器
使用户能更方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供Ajax交互
Jquery基础
Bom
Window dom
History,location,alert 所有html节点
页面加载
$(document).ready(callback);
$(document).ready(function() {});à简写$(function(){});
绑定一个在DOM文档载入完成后执行的函数
同一个页面上可以多次使用
案例
Jquery.js 是完整版，包含注释以及一些便于理解的字符 开发或阅读源码使用
Jquery.min.js 压缩版，功能与jquery.js完全一致 项目上线使用
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert(1);
});
//简写方式
$(function(){
alert(2);
});
alert(3);
</script>
hellowrod!
</body>
</html>
核心函数
$(expression,[context])
接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素
jQuery 的核心功能都是通过这个函数实现的
案例 找到id为d1的元素并替换其中的html内容
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#i1").css("background-color","red");
alert($("#d1").html(123));
});
</script>
</head>
<body>
<input type="text" id="i1" value="123">
<div id="d1">
<span>asd</span>
</div>
</body>
</html>
jQuery元素与DOM元素
通过jquery核心函数($(…))获取的是jquery对象
我们可以通过下标来获取jquery中的js对象
注：jquery和js对象的方法属性并不相同不能乱用(如 通过jquery对象获取value属性)
var cr = $(“#cr”)[0]; 将jQuery元素转换为DOM元素
var cr = $(“#cr”).get(0); 将jQuery元素转换为DOM元素
案例
、<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" id="i" value="000">
<input type="text" value="123">
<input type="text" value="456">
<input type="text" value="789">
<input type="text" value="asd">
<div id="div1">
<span style="color:red">asd</span>
</div>
<script type="text/javascript">
$("#i").css("background-color", "blue")
//获取jQuery对象
var i = $("#i");
//把jQuery对象转化为js对象
//var jsi=i[0];
var jsi = i.get(0);
var is = $("input");
for (var j = 0; j < is.length; j++) {
var js_i = is[j];
alert(js_i.value);
}
</script>
</body>
</html>
$(html)
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素
function sure() {
$("<div><p>Hello</p></div>").appendTo("body")
}
生成一个包含“<div><p>Hello</p></div>”得 jQuery元素，将其追加到body元素里面
布尔属性判定
is(":checked")是jQuery的方法判断，jQuery对象是否选中
案例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<label>是否同意协议</label>
<input type="checkbox" id="i" value="123" οnclick="a()">
<script type="text/javascript">
function a(){
var i=$("#i");
if(i.is(":checked")){
alert("你已经同意该协议");
}else{
alert("你不同意");
}
}
</script>
</body>
</html>
选择器
选择器 | jQuery | 返回 |
标签选择器 Element | $(“tagName”) | 单个元素 |
ID选择器 #id | $(“#ID”) | 集合元素 |
类选择器 .class | $(“.demo”) | 集合元素 |
群组选择器 Selector1,selector2 | $(“div,span,p,myClass”) | 集合元素 |
通配选择符 | $(“*”) | 集合元素 |
选择器 | jQuery | 返回 |
$(“ancestor descendant ”) | $(“div span”)选取div中所有的span | 集合元素 |
$(“parent > child”) | $(“div > span”)选取div元素下名为span的子元素 | 集合元素 |
$(“prev + next”) | $(“.one + div”)选取class为.one的下一个div元素 | 集合元素 |
| $(“.one + div”) | $(“.one”).next(“div”) |
$(“prev ~ siblings”) | $(“#two~div”)选取id为two的元素后面所有div兄弟元素 | 集合元素 |
| $(“#prev~div”) | $(“#prev”).nextAll(“div”) |
案例一
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<input type="text">
<input type="text" class="c1">
<input type="text" class="c2">
<input type="text" id="d1">
<div style="width:200px;height:200px;">
<div style="width:150px;height:150px;"></div>
</div>
<span class="c1">asd</span>
<script type="text/javascript">
//标签选择器
$("input").css("background-color", "red");
//id选择器
$("#d1").css("background-color", "gray");
//类选择器
$(".c1").css("background-color", "blue");
//群组选择器
$("input,div,c1").css("background-color", "green");
//通配符选择器
$("div *").css("background-color", "red");
</script>
</body>
</html>
案例二
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<div>
<span>div内部</span>
<div id="d1">
<span>div内部</span>
</div>
</div>
<span>div外部</span>
<script type="text/javascript">
$("div span").css("background-color", "yellow");
$("#d1>span").css("background-color", "red");
</script>
</body>
</html>
案例三
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div {
width: 200px;
height: 30px;
background-color: yellow;
}
</style>
<title>My JSP 'index4.jsp' starting page</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<div>第一个</div>
<div class="one">第二个</div>
<div>第四个s</div>
<span>第三个</span>
<ul>
<li>
<div>第五个</div>
</ul>
<script type="text/javascript">
$(".one~div").css("background-color", "pink");
$(".one+div").css("background-color", "red");
</script>
</body>
</html>
4642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
