知识点:
1 在HTML中引入jQuery
2 jQuery中就绪函数
3 jQuery中选择器
4 使用jQuery获取表单元素的值 及标签中间的内容
5 jQuery中获取标签属性
6 jQuery设置和获取标签样式
-----------------------------------
一 在HTML中引入jQuery
1
1) 把jQuery.js文件添加到项目的js目录
2) 在html页面使用<script>引入jQuery.js
<script src="js/jQuery.js"></script>
注意: 先引入jQuery.js然后再引入自己的js文件
二 jQuery中就绪函数
1) 语法
$(documnet).ready(function(){
jQuery代码
})
2) 简化版
$(function(){
jQuery代码
})
3) jQuery代码的语法
3.1) 标签对象的事件
$("选择器").事件名(function(){})
注意: 事件名 没有on
js : onclick -->jQuery click()
三 jQuery中选择器
四 获取和设置标签的属性信息
1) attr()
获取属性值 : 标签对象.attr("属性名")
设置属性值 :标签对象.attr("属性名",值)
同时设置多个属性: 标签对象.attr({"属性名":值,"属性名":值})
2) prop()
获取属性值 : 标签对象.prop("属性名")
设置属性值 :标签对象.prop("属性名",值)
同时设置多个属性: 标签对象.prop({"属性名":值,"属性名":值})
注意:
使用prop获取或设置checked,disabled,selected,readonly属性时,值为true或false
几个复选框和全选框网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/top.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/goods.css">
<!-- <script src="js/checkBox.js"></script> -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jqueryGoods.js"></script>
</head>
<body>
<div id ="div_content">
<iframe src="top.html" frameborder="0" id="iframe_top" scrolling="no"></iframe>
<div id = "div_content_table">
<table>
<tr>
<th class="goodsImg"><input type = "checkbox" id="boxOne" />全选</th>
<th >商品图片</th>
<th>商品名称/出售者/联系方式</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type = "checkbox" name="box" />
</td>
<td>
<img src="img/list1.jpg"/>
</td>
<td>杜比环绕，家庭影院必备，超真实享受
<br />
出售者：ling112233
<br />
<img src="img/1.gif"/><img src="img/2.gif"/>
</td>
<td>一口价：
<br />
2000.0
</td>
</tr>
<tr>
<td>
<input type = "checkbox" name="box" />
</td>
<td>
<img src="img/list2.jpg"/>
</td>
<td>杜比环绕，家庭影院必备，超真实享受
<br />
出售者：ling112233
<br />
<img src="img/1.gif"/><img src="img/2.gif"/>
</td>
<td>一口价：
<br />
2000.0
</td>
</tr>
<tr>
<td>
<input type = "checkbox" name="box" />
</td>
<td>
<img src="img/list3.jpg"/>
</td>
<td>杜比环绕，家庭影院必备，超真实享受
<br />
出售者：ling112233
<br />
<img src="img/1.gif"/><img src="img/2.gif"/>
</td>
<td>一口价：
<br />
2000.0
</td>
</tr>
<tr>
<td>
<input type = "checkbox" name="box"/>
</td>
<td>
<img src="img/list4.jpg"/>
</td>
<td>杜比环绕，家庭影院必备，超真实享受
<br />
出售者：ling112233
<br />
<img src="img/1.gif"/><img src="img/2.gif"/>
</td>
<td>一口价：
<br />
2000.0
</td>
</tr>
</table>
</div>
<iframe src="bottom.html" frameborder="0" id="iframe_bottom" scrolling="no"></iframe>
</div>
</body>
</html>效果图
实现全选功能（包括全选及取消全选）checkBox.js代码
function checkBox(){
let isOkAll = document.getElementById("boxOne").checked;
let isOkBox = document.getElementsByName("box");
for (let s of isOkBox) {
s.checked = isOkAll;
}
}
function checkBoxOne(){
let isOkBox = document.getElementsByName("box");
let isOkAll = document.getElementById("boxOne");
for(let s of isOkBox){
if(!s.checked){
isOkAll.checked = s.checked;
return;
}
}
isOkAll.checked = true;
}实现全选功能（包括全选及取消全选） 的jquery代码
$(document).ready(function(){
$("#boxOne").click(function(){
let isOk = $(this).prop("checked");
console.log(isOk)
$("[name='box']").prop("checked",isOk)
})
$("[name='box']").click(function(){
let len = $("[name='box']").length;
console.log(len)
let checkedLen = $("[name='box']:checked").length;
console.log(checkedLen)
$("#boxOne").prop("checked",len == checkedLen)
})
})
五 添加和删除标签的样式
1 类样式
1) addClass("类样式名1 类样式名2 ... ") 添加类样式
2) removeClass()
removeClass("类样式名") :移除指定的类样式
removeClass() :移除所有类样式
2 通过 css() 设置样式
css("样式属性名",值)
css({"样式属性名":值,"样式属性名":值})
六 获取表单元素的value值 ,标签中间内容
1 表单元素的value值
赋值: 表单元素对象.val("值");
取值: 表单元素对象.val();
2 标签中间内容
js :innerHTML ,innerText
jQuery: html()
text()
注册网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当当网注册页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<!-- <script src="js/注册.js"></script> -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/注册jquery.js"></script>
</head>
<body>
<div id="header">
<div id="register_header">
<div class="register_header_left"><img src="images/logo.gif" alt="logo"></div>
<div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="login.html" class="blue">登录</a></div>
</div>
</div>
<div id="main">
<div class="register_content">
<div class="register_top_bg"></div>
<div class="register_mid_bg">
<ul>
<li class="register_mid_left">填写注册信息</li>
<li class="register_mid_mid">2. 邮箱验证</li>
<li class="register_mid_right">3. 完成注册</li>
</ul>
</div>
<div class="register_top_bg_mid">
<div class="register_top_bg_two_left"></div>
<div class="register_top_bg_two_right"></div>
<div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"><br>您所提供的资料不会做其他用途，敬请安心填写。</div>
</div>
<div class="register_dotted_bg"></div>
<div class="register_message">
<form action="" method="post" id="myform">
<dl class="register_row">
<dt>Email地址：</dt>
<dd><input id="email" type="text" class="register_input"></dd>
<dd><div id="email_prompt" ></div></dd>
<dl class="register_row">
<dt>设置昵称：</dt>
<dd><input id="nickName" type="text" class="register_input"></dd>
<dd><div id="nickName_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设定密码：</dt>
<dd><input id="pwd" type="password" class="register_input"></dd>
<dd><div id="pwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input"></dd>
<dd><div id="repwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>性别：</dt>
<dd><input name="sex" id="man" type="radio" value="男" checked="checked"> <label for="man">男</label></dd>
<dd> <input name="sex" id="woman" type="radio" value="女"> <label for="woman">女</label></dd>
</dl>
<dl class="register_row">
<dt>所在地区：</dt>
<dd>
<select id="province" style="width:120px;" >
<option>请选择省/城市</option>
</select>
</dd>
<dd>
<select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select>
</dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif">
<input type="button" id = "button123">
</div>
</form>
</div>
</div>
</div>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
注册js文件
let classDl = document.getElementsByClassName("register_row")
function checkemail(){
let email = classDl.getElementsById("email").value
let emailInner = classDl.getElementsById("email_prompt")
if(email == ""){
emailInner.innerHTML = "邮箱为空"
emailInner.style.color = "red"
return false;
}
let reg = /[@][.]{1}/
if(!reg.test(email)){
emailInner.innerHTML = "邮箱包含一个@ 后面一个."
emailInner.style.color = "red"
return false;
}
emailInner.innerHTML = "✔"
emailInner.style.color = "green"
return true;
}
function checkNickName(){
let name = classDl.getElementsById("nickName").value
let nameInner = classDl.getElementsById("nickName_prompt")
if( name == ""){
nameInner.innerHTML = "邮箱为空"
nameInner.style.color = "red"
return false;
}
let reg = /^[0-9][A-z_]{5,12}/
if(!reg.test(name)){
nameInner.innerHTML = "开头不能为数字,长度6到13位"
nameInner.style.color = "red"
return false;
}
nameInner.innerHTML = "✔"
nameInner.style.color = "green"
return true;
}
function checkPwd(){
let password = classDl.getElementsById("pwd").value
let passwordInner = classDl.getElementsById("pwd_prompt")
let(password == ""){
passwordInner.innerHTML = "密码为空"
passwordInner.style.color = "red"
return false;
}
let reg =/[/w]{8,16}/
if{
passwordInner.innerHTML = "只能包含数字字母下划线"
passwordInner.style.color = "red"
return false;
}
passwordInner.innerHTML = "✔"
passwordInner.style.color = "green"
return true;
}
function checkPwd(){
let password = classDl.getElementsById("pwd").value
let repassword = classDl.getElementsById("repwd").value
let repasswordInner = classDl.getElementsById("repwd_prompt")
let(password == ""){
repasswordInner.innerHTML = "密码为空"
repasswordInner.style.color = "red"
return false;
}
if(!password === repassword){
passwordInner.innerHTML = "密码错误"
passwordInner.style.color = "red"
return false;
}
passwordInner.innerHTML = "✔"
passwordInner.style.color = "green"
return true;
}
let pros = new Array();
pros["湖北省"] = ["襄阳市","宜昌市","武汉市"]
pros["北京市"] = ["东城区","西城区","海淀区"]
function addPro(){
let pro = document.getElementById("province");
for (let s in pros) {
let op = new Option(s,s);
pro.add(op,null);
}
}
window.onload = addPro;
function addCity(){
let city = document.getElementById("city")
city.options.length = 1
let pro = document.getElementById("province").value
for (let s of pros[pro]) {
let op = new Option(s,s);
city.add(op,null)
}
}
注册jquery文件
$(function(){
addPro()
$("#province").change(function(){
addCity()
})
let isEmail = false
$("#email").blur(function(){
let email = $(this).val()
let emailPrompt = $("#email_prompt")
if(email == ""){
emailPrompt.html("邮箱不能为空！")
emailPrompt.removeClass().addClass("register_prompt_error")
isEmail = false
return;
}
let reg =/^\w{5,10}@[a-z\d]{2,10}[.][a-z]{2,4}$/i;
if(!reg.test(email)){
emailPrompt.html("格式有误")
emailPrompt.removeClass().addClass("register_prompt_error")
isEmail = false
return;
}
emailPrompt.html("")
emailPrompt.removeClass().addClass("register_prompt_ok")
isEmail = true;
})
let isNickName =false
$("#nickName").blur(function(){
let nickName = $(this).val()
let nickNamePro = $("#nickName_prompt")
if(nickName == ""){
nickNamePro.html("不能为空")
nickNamePro.removeClass().addClass("register_prompt_error")
isNickName = false;
return
}
let reg = /[\w]{2,10}/
if(!reg.test(nickName)){
nickNamePro.html("错误格式")
nickNamePro.removeClass().addClass("register_prompt_error")
isNickName = false;
return
}
nickNamePro.html("")
nickNamePro.removeClass().addClass("register_prompt_ok")
isNickName = true
})
let isPwd = false
$("#pwd").blur(function(){
let pwd = $(this).val()
let pwdPro = $("#pwd_prompt")
if(pwd == ""){
pwdPro.html("不能为空")
pwdPro.removeClass().addClass("register_prompt_error")
isPwd = false
return
}
let reg = /[\w]{6,20}/
if(!reg.test(pwd)){
pwdPro.html("格式错误")
pwdPro.removeClass().addClass("register_prompt_error")
isPwd = false
return
}
pwdPro.html("")
pwdPro.removeClass().addClass("register_prompt_ok")
isPwd = true
})
let isrepwd = false
$("#repwd").blur(function(){
let repwd = $(this).val()
let pwd = $("#pwd").val()
let repwdPro = $("#repwd_prompt")
if(repwd == ""){
repwdPro.html("不能为空")
repwdPro.removeClass().addClass("register_prompt_error")
isrePwd = false
return
}
if(repwd != pwd){
repwdPro.html("密码不一致")
repwdPro.removeClass().addClass("register_prompt_error")
isrePwd = false
return
}
repwdPro.html("")
repwdPro.removeClass().addClass("register_prompt_ok")
isrepwd = true
})
$("#myform").submit(function(){
$(".register_input").trigger("blur")
return isEmail&&isNickName&&isPwd&&isepwd
})
$("#button123").click(function (){
$(".register_input").trigger("blur")
if(isEmail&&isNickName&&isPwd&&isrepwd){
$("#myform").submit();
}
})
})
let pros = new Array();
pros["湖北省"] = ["襄阳市","宜昌市","武汉市"]
pros["北京市"] = ["东城区","西城区","海淀区"]
function addPro(){
for (let s in pros) {
$("<option>",{
text:s,
val:s
}).appendTo("#province")
}
}
function addCity(){
let pro = $("#province").val()
$("#city option:not(:first-of-type)").remove()
for (let s of pros[pro]) {
$("<option>",{
text:s,
val:s
}).appendTo("#city")
}
}
七 内添加
1) append(content|fn)
appendTo(content)
示例:把B添加到A内部结尾处
A.append(B)
B.apppendTo(A)
2) prepend(content|fn)
prependTo(content)
let pros = new Array();
pros["湖北省"] = ["襄阳市","宜昌市","武汉市"]
pros["北京市"] = ["东城区","西城区","海淀区"]
function addPro(){
for (let s in pros) {
$("<option>",{
text:s,
val:s
}).appendTo("#province")
}
}
八 : 创建jQuery对象
1 语法:
$("<标签名>",{
属性名:值,
属性名:值
....
})
let pros = new Array();
pros["湖北省"] = ["襄阳市","宜昌市","武汉市"]
pros["北京市"] = ["东城区","西城区","海淀区"]
function addPro(){
for (let s in pros) {
$("<option>",{
text:s,
val:s
}).appendTo("#province")
}
}
