1.jQuery的使用
jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的 外部JavaScript脚本文件一样的语法。
<head>
<script src="jquery-1.11.1.js"></script>
</head>
2.文档就绪事件
文档就绪事件，实际就是文件加载事件。 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。 如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法1：
$(document).ready(function(){
// 开始写 jQuery 代码...
});写法2：简洁写法-推荐
$(function(){
// 开始写 jQuery 代码...
});
3.1元素/标签选择器
jQuery 元素选择器基于元素/标签名选取元素。
语法：$("标签名称")
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
//文档就绪事件：
$(document).ready(function() {
//编写jQuery
});
$(function() {
//1、标签选择器：
//获取所有的div元素（集合）
var divList = $("div");
console.log(divList); //jQuery的对象
console.log(divList.length);
for(var i = 0; i < divList.length; i++) {
console.log(divList[i]); //js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
});
</script>3.2 #id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下：
$("#p1)
//2. id选择器
function idSelector(){
//根据id获取到的元素市唯一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html()) ;
}3.3 .class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
$(".mydiv")
//3. .class选择器
function classSelector(){
var list=$(".mydiv");
console.log(list.length);
for (var i=0;i<list.length;i++) {
console.log($(list[i].innerHTML))
console.log((list[i].innerHTML))
}
}3.4 全局选择器
匹配所有元素
$("*")
//4.全局选择器
function allSelector(){
var list=$("*");
console.log(list.length);
for (var i=0;i<list.length;i++) {
console.log(list[i]);
console.log(list[i].innerHTML);
}
}3.5 并集选择器
将每一个选择器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")
//5.并集选择器
function andSelector(){
var list=$("div,p,li");
printList(list);
}3.6 后代选择器
在给定的祖先元素下匹配所有的后代元素
$("form input")
//6.后代选择器:包括所有后代
function subSelector(){
var list=$("form input ")
printList(list);
}3.7 子选择器
在给定的父元素下匹配所有的子元素
//7.子选择器：只有子元素
function sunSelector(){
var list=$("form>input ")
printList(list);
}3.8 相邻选择器
匹配所有紧接在 prev 元素后的 next 元素
//8.相邻选择器，
function nextSelector(){
var list=$("label + input ")//与<label>元素相邻的下一个<input>元素
printList(list);
}3.9 同辈选择器
//9.同辈选择器
function sublingsSelector(){
var list=$("form ~ input ")
printList(list);
}4.10 属性选择器
//10.属性选择器
function attrSelector(){
var list=$("div[id]");//获取所有有id属性的div元素集合
list=$('input[name="userName"]');//获取所有input标签中name属性是userName元素集合
list=$('input[name^="user"]');//获取所有input标签中name属性是以user开头元素集合
list=$('input[name$="pass"]');//获取所有input标签中name属性是以pass结尾元素集合
list=$('input[name*="user"]');//获取所有input标签中name属性是有user元素集合
list=$("input[id][name^='user']");
printList(list);
}4.12 可见性选择器
匹配所有的可见或不可见的元素
//11.可见性选择器
function seeSelector(){
//匹配所有可见div元素
var list=$("div:visible");
//匹配所有不可见div元素
list=$("div:hidden")
//匹配所有不可见input元素，样式有display:none的元素和type=hidden的元素
list=$("input:hidden")
printList(list);
}
5 jQuery函数
5.1 与标签内容相关的函数
function textFun(){
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的内容，包含了嵌套的标签的内容
console.log(str1);
var str2=$("div").text();//获取的是所有匹配元素中的文本信息，不包含嵌套标签
console.log(str2);
var str3=$("div").val();//val()只能获取表单项元素的值，div不是表单元素，所以获取不到
console.log(str3);
var str4=$("input").val();//获取的是第一个匹配的表单元素value的值，input是表单元素，可以获取到表单值
console.log(str4);
}5.2 与标签属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服");
//移除属性
img.removeAttr("title");//移除属性
var src=img.attr("src");//获取属性
var title=img.attr("title");
console.log(src+"===="+title);5.3 获取checked 或者selected属性 使用prop函数获取到的值是boolean类型
var list=$("input[type='radio']");
for (var i=0;i<list.length;i++) {
var flag=$(list[i]).prop("checked");
console.log("checked="+flag)
}
}5.4 与css相关的函数
function cssFun(){
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前样式就删除，如果没有就添加
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"})
}
function changeCss(){
$("div").toggleClass("fontColor");//匹配元素如果有当前样式就删除，如果没有就添加
}6. 事件
6.1 常用DOM事件列表
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
| click单击 | keydown | submit | load |
| dbclick双击 | keyup | change | |
| mouseover鼠标移上 | focus | ||
| mouseout鼠标移出 | blur | ||
| hover鼠标悬浮 |
6.2 常用的jQuery事件方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//页面加载事件
$(function(){
//给所有button绑定单击事件
$("button").click(function(){
//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是哪个按钮，this此时是js对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有超链接绑定鼠标移上事件
$("a").mouseover(function(){
var str=$(this).html();
$(this).html("鼠标移上-"+str);
});
//给所有超链接绑定鼠标移出事件
$("a").mouseout(function(){
var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){
$(this).css("color","red")
});
});
</script>
</head>
<body>
<a href="#">首页</a>
<a href="#">零食</a>
<a href="#">鲜花</a>
<button type="button">普通按钮1</button>
<button type="button">普通按钮2</button>
<button type="button">普通按钮3</button>
</body>
</html>
6.3 克隆元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<style>
div {
background: lavenderblush;
padding: 20px;
}
p {
border: solid 1px red;
background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$("#btn3").click(function() {
alert("试试就试试！");
});
// clone(true)
$("#btn1").click(function() {
$("p").clone(true).appendTo("div");
});
//clone(false)
$("#btn2").click(function() {
$("p").clone(false).appendTo("div");
});
});
</script>
</head>
<body>
<button id="btn1">克隆元素-true</button>
<button id="btn2">克隆元素-false</button>
<p>
要被克隆的段落
<button id="btn3">点击我试试</button>
</p>
<div>
div1
</div>
</body>
</html>7 表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<h1>英雄会注册</h1>
<form id="myForm" action="success.html" method="get">
*用户名：<input type="text" name="userName" placeholder="请输入用户名" />
<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br />
*密码：<input type="password" name="pwd1" placeholder="请输入密码" />
<span id="pwd1Msg">密码长度至少8位</span><br />
*确认密码：<input type="password" name="pwd2" placeholder="请输入密码" />
<span id="pwd2Msg">确认密码与密码一致</span><br />
*性别：<select name="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select> <br />
*电话号码<input name="phone" /><span id="phoneMsg"></span> <br />
*邮箱：<input name="email" type="email" /><span id="emailMsg"></span><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
$("input[name='userName']").blur(function(){//失去焦点时调用isName
isName();
});
$("input[name='pwd1']").blur(function(){
isPwd();
});
$("input[name='pwd2']").blur(function(){
isPwd2();
});
$("select[name='gender']").blur(function(){
isGender();
});
$("#myForm").submit(function(){
return isName()&&isPwd()&&isPwd2()&&isGender();
});
});
function isGender(){
var val=$("select[name='gender']").val();
if(val==-1){
alert("性别为必选项！")
return false;
}
}
function isPwd2(){
var val1=$("input[name='pwd1']").val();
var val2=$("input[name='pwd2']").val();
if(val1!=val2){
$("#pwd2Msg").html("两次输入的密码不一致！").css("color","red");
return false;
}
$("#pwd2Msg").html("两次输入的密码一致！").css("color","green");
return true;
}
function isPwd(){
var val=$("input[name='pwd1']").val();
if(val==""){
$("#pwd1Msg").html("密码不能为空！").css("color","red");
return false;
}else if(val.length<8){
$("#pwd1Msg").html("密码必须大于8位！").css("color","red");
return false;
}
$("#pwd1Msg").html("密码可用！").css("color","green");
return true;
}
function isName(){
var val=$("input[name='userName']").val();
if(val==""){
$("#userNameMsg").html("用户名不能为空！").css("color","red");
return false;
}else if(/^[a-zA-Z]\w{5,}/.test(val)==false){
$("#userNameMsg").html("用户名不合法！").css("color","red");
return false;
}
$("#userNameMsg").html("用户名可用！").css("color","green");
return true;
}
</script>
3966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
