jQuery语法结构
$(selector).action() ;
工厂函数 $():将DOM对象转化为jQuery对象;$等同于jQuery
选择器 selector:获取需要操作的DOM元素
方法 action():jQuery中提供的方法,包括绑定事件处理的方法
方法
css(“属性”,”属性值”) :为元素设置CSS样式的值
addClass(“类样式名”) :为元素添加类样式
html(“HTML代码”) :为元素设置innerHTML的值
$(document).ready():类似window.onload
size( ) : 长度
next( ): 获取当前标签的下一个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面加载ready</title>
</head>
<!--在当前页面引入jquery库文件-->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
//JavaScript页面加载
window.onload = function() {
alert("页面加载-JavaScript");
}
//JQuery页面加载
$(document).ready(
//语句是作为参数被ready方法执行,故不加;
alert("页面加载-方式1")
);
// JQuery页面加载简写
$(function(){
//直接使用工厂函数,函数内部是一个无名函数
alert("页面加载-方式2");
});
</script>
<body>
</body>
</html>
类CSS选择器
基本选择器
标签选择器
类选择器
ID选择器
并集选择器
交集选择器
全局选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ID选择器类选择器标签选择器</title>
</head>
<!--在当前页面引入jquery库文件-->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/*
*html()方法类似====>innerHTML
*css()方法类似 ====>css样式的改变
*addClass类似 =====>给标签添加一个类样式
*size()方法 ======>长度
*next()方法 ========>获取当前标签的下一个标签
*/
//网页加载的简化写法
$(function() {
/*************ID选择器*************/
alert($("#p1").html());
$("#p1").html("李太白");
/*************class选择器*************/
alert($(".one").html());
/*************标签选择器*************/
alert($("p").size())
/************css()方法******************/
$(".one").css("font-size", "10px");
$(".one").css("color", "green");
/************addClass()方法******************/
$(".one").addClass("two");
/*******************next方法********************/
$(".one").css("font-size", "10px").next().css("color", "green")
alert($(".one").next().html());
});
</script>
<style type="text/css">
.one {
font-size: 50px;
}
.two {
font-size: 5px;
color: yellow;
}
</style>
<body>
<p id="p1">李白</p>
<p class="one">杜甫</p>
<p>苏东坡</p>
<p>纳兰性德</p>
<p>李清照</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>并集选择器交集选择器全局选择器</title>
</head>
<!--在当前页面引入jquery库文件-->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
/**************并集选择器****************/
//语法使用,进行分割
$("p,div,.one").css("color","red");
/**************交集选择器****************/
//语法标签.class 或者标签#id
$("span.one").css("color","yellow");
/***************全局选择器********************/
$("*").css("font-size","50px");
})
</script>
<style type="text/css">
.one {
font-size: 50px;
}
.two {
font-size: 5px;
color: yellow;
}
</style>
<body>
<p id="p1">李白</p>
<span class="one">杜甫</span>
<p>李清照</p>
<p>纳兰性德</p>
<p>曹操</p>
<div>苏东坡</div>
<div>曹植</div>
</body>
</html>
层次选择器
后代选择器
子选择器
相邻元素选择器
同辈元素选择器
<!DOCTYPE html>
<html>
<script type="text/javascript" src="js/jquery-1.9.1.js">
</script>
<head>
<meta charset="utf-8" />
<title>层次选择器</title>
<style type="text/css">
.abc {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
$(function() {
/******************层次选择器*******************/
//层次选择器1,取得所有后代
var d4 = $('#d4 div');
alert(d4.length);
//层次选择器2,只取儿子辈孙子代不算
var d5 = $('#d4>div');
alert(d5.length);
//层次选择器3,只取隔壁,而且下方的
var d6 = $('#d5+div');
alert(d6.html());
//同辈选择器,获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
alert($("#d1~span").length);
});
</script>
</head>
<body>
<input type="text" id="t1" value="在这里输入值" />
<br />
<div id="d1" class="abc">
<div id="d2" class="abc">
</div>
</div>
<div id="d3">
</div>
<span>
span
</span>
<hr/>
<div id="d4">
<div>无名div</div>
<div id="d5">
<div id="d8"></div>
<span>
span
</span>
</div>
<div id="d6">6号div</div>
<div id="d7"></div>
</div>
<span>
span
</span>
<hr/>
</body>
</html>
属性选择器:属性选择器通过HTML元素的属性来选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>属性选择器</title>
<!--css样式 -->
<style type="text/css">
#box {
background-color: #FFF;
border: 2px solid #000;
padding: 5px;
}
</style>
<!--javaScript导包 -->
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<!--Jquery代码 -->
<script type="text/javascript">
$(function() {
//$("h2[title]").css("background-color","#ff0099");
//改变含有title属性的<h2>元素的背景颜色
//$("[class='odds']").css("background-color","#ff0099");
//改变class属性的值为odds的元素的背景颜色
//$("[id!=box]").css("background-color","#09F");
//改变id属性的值不为box的元素的背景颜色
//$("[title^=h]").css("background-color","#09F");
//改变title属性的值中以h开头的元素的背景颜色
//$("[title$=jp]").css("background-color","#09F");
//改变title属性的值中以jp结尾的元素的背景颜色
//$("[title*=s]").css("background-color","#09F");
//改变title属性的值中含有s的元素的背景颜色
$("li[class][title*=y]").css("background-color","#09F");
//改变包含class属性,且title属性的值中含有y的<li>元素的背景颜色
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">银魂</li>
<li class="evens" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
</div>
</body>
</html>
过滤选择器
基本过滤选择器:基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素;也可以根据索引的值选取元素;还支持一些特殊的选择方式
可见性过滤选择器:通过元素显示状态来选取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>过滤选择器</title>
</head>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//$("li:first").css("background-color","#09F");
//改变第1个<li>元素的背景颜色
//$("li:last").css("background-color","#09F");
//改变最后一个<li>元素的背景颜色
//$("li:not(.three)").css("background-color","#09F");
//改变class不为three的<li>元素的背景颜色
//$("li:even").css("background-color","#09F");
//改变索引值为偶数的<li>元素的背景颜色
//$("li:odd").css("background-color","green");
//改变索引值为奇数的<li>元素的背景颜色
//$("li:eq(1)").css("background-color","#09F");
//改变索引值等于1的<li>元素的背景颜色
//$("li:gt(1)").css("background-color","#09F");
//改变索引值大于1的<li>元素的背景颜色
//$("li:lt(1)").css("background-color","#09F");
//改变索引值小于1的<li>元素的背景颜色
//$(":header").css("background-color","#09F");
//改变所有标题元素,例如<h1>,<h2>,<h3>……这些元素的背景颜色
//$(":focus").css("border-bottom-color", "red");
//改变当前获取焦点的元素的背景颜色
//可见性选择过滤器
//alert($(":visible").length);
//alert($(":hidden").length);
//alert($("input:hidden").val());
});
</script>
<body>
<h2>网络小说</h2>
<ul>
<li>王妃不好当</li>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>
<ul>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>
<input type="hidden" id="aa" value="我是藏起来活到最后的那个" />
</body>
</html>
表单选择器:根据不同类型的表单元素进行选取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单验证</title>
</head>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//点击提交按钮,如果为空则输入框的边框为红色
$(":submit").click(
function() {
//ps 演示获取这几个的方式
//获取用户名
var $username = $(":input[name='username']");
//获取密码
var $password = $(":password[name='pwd']");
//获取确认密码
var $repwd = $(":password[name='repwd']");
//获取昵称
var $nickname = $("[name='nickname']");
//获取已选单选按钮
var $radio = $(":radio:checked");
//获取已选复选框
var $checkbox = $(":checkbox:checked");
//获取已选下拉框
var $selected = $(":selected");
redSet($username);
redSet($password);
redSet($repwd);
redSet($nickname);
redSet2($radio);
redSet3($checkbox);
redSet4($selected);
return false;
}
);
//value ===>val()
//innserHTML ===>html()
function redSet(obj) {
if(obj.val() == "") {
obj.css("border", "1px solid red");
} else {
obj.css("border", "1px solid green");
}
}
//parent()获取父元素
function redSet2(obj) {
if(obj.length == 0) {
$(":radio").parent().css("border", "1px solid red");
} else {
$(":radio").parent().css("border", "1px solid green");
}
}
function redSet3(obj) {
if(obj.length == 0) {
$(":checkbox").parent().css("border", "1px solid red");
} else {
$(":checkbox").parent().css("border", "1px solid green");
}
}
function redSet4(obj) {
if(obj.val() == "") {
$("select").css("border", "1px solid red");
} else {
$("select").css("border", "1px solid green");
}
}
});
</script>
</head>
<body>
<fieldset>
<legend>注册表单</legend>
<form onsubmit="return false;">
<input type="hidden" name="pid" value="1" />
<p>账号:<input type="text" name="username" /></p>
<p>密码:<input type="password" name="pwd" /></p>
<p>确认密码:<input type="password" name="repwd" /></p>
<p>昵称:<input type="text" name="nickname" /></p>
<p>性别:
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
</p>
<p>爱好:
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" value="其他" />其他
</p>
<p>省份:
<select>
<option value="">--省份--</option>
<option value="北京">北京</option>
<option value="云南">云南</option>
<option value="云南">云南</option>
<option value="其他">其他</option>
</select>
</p>
<input type="submit" value="提交表单" />
</form>
</fieldset>
</body>
</html>
内容过滤器:根据内容来选取元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内容选择器</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("td:contains('运动鞋')").css("background-color","blue");
//包含"运动鞋"的表格行背景色为蓝色
//$("td:empty").css("background-color","red");
//没有内容的单元格背景色为红色
//$("td:has('a')").css("background-color","green");
//包含连接的单元格背景色为绿色
//$("td:parent").css("background-color","gray");
//含有子节点或文本的表格背景色为灰色
});
</script>
</head>
<body>
<table>
<thead>
<tr style="background-color: #aaaaaa;">
<th>序号</th>
<th>订单号</th>
<th>商品名称</th>
<th>价格(元)</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>10035900</td>
<td><a href="#">Nike透气减震运动鞋</a></td>
<td>231.00</td>
</tr>
<tr>
<td>2</td>
<td>10036114</td>
<td>天美太阳伞</td>
<td>51.00</td>
</tr>
<tr>
<td>3</td>
<td>10035110</td>
<td><a href="#">万圣节儿童蜘蛛侠装</a></td>
<td>31.00</td>
</tr>
<tr>
<td>4</td>
<td>10035120</td>
<td>匹克篮球运动鞋</td>
<td>231.00</td>
</tr>
<tr>
<td>5</td>
<td>10032900</td>
<td>jQuery权威指南</td>
<td></td>
</tr>
</table>
</body>
</html>
特殊符号的转义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊符号的转义</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
//使用\\将特殊符号进行转义
$("#a\\#b").html("见微知著");
$("#s\\[2\\]").text("墨溅书香,妙笔生花!");
});
</script>
</head>
<body>
<h1 id="a#b">墨渐生微</h1>
<h1 id="s[2]">欢迎关注!!</h1>
</body>
</html>