pt21Jquery
jQuery
jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。
官网下载1.11.3，解压后 jquery.js（完整版） jquery.min.js（压缩版：引用使用）
工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例如 :
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
//选择器的特点，与样式选择器一致
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<h1 id="title">Hello Worldh1>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
// jQuery中将所有的Js对象的属性和方法封装成为一个jQuery对象
// $() 工厂函数 用来创建jQuery对象
//可以接收字符串格式的选择器、字符串格式的HTML标签、查找好的JS节点对象作为参数 最后返回jQuery对象
//console.log($) //打印 ƒ (a,b){return new m.fn.init(a,b)}，引用成功
var $h1 = $('h1');
var $title = $('#title');
console.log($h1);//jQuery对象，查找的方式h1,本文件查找的结果，跟下行的一样
console.log($title);//jQuery对象，查找的方式#title
console.log($h1[0]);//jQuery对象内部包含JS节点对象,这跟下行的一样
// var title = document.getElementById('title');
// console.log(title);
// jQuery对象的操作
// jq.方法() 获取
// jq.方法(xx) 设置
$h1.css('color','red');
script>
body>
html>
原生JavaScript对象与jQuery对象
原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
- 原生JavaScript转换jQuery对象
$(原生对象)，返回 jQuery 对象 - jQuery对象转换原生JavaScript对象
- 方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0]; - 方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);
- 方法一 : 根据下标取元素,取出即为原生对象
获取元素$(“选择器”)
jQuery通过选择器获取元素，$(“选择器”)
选择器分类 :
基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
过滤选择器
需要结合其他选择器使用。
:first
匹配p标签第一个元素 例:$("p:first")
:last
匹配最后一个元素 例:$("p:last")
:odd
匹配奇数下标对应的元素
:even
匹配偶数下标对应的元素
:eq(index)
匹配指定下标的元素
:lt(index)
匹配下标小于index的元素
:gt(index)
匹配下标大于index的元素
:not(选择器)
否定筛选,除()中选择器外,其他元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq-查找页面元素title>
head>
<body>
<h1>使用选择器查找页面元素h1>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo architecto voluptate ab maiores assumenda nihil, ipsa molestiae doloribus nostrum et sint facere minus doloremque beatae esse odio, praesentium itaque harum.span><span>Laborum quo molestias delectus odio, nam voluptatem non aspernatur accusamus, libero cum mollitia quisquam perspiciatis aliquid. Cupiditate, laborum error libero quasi cum nostrum? Temporibus et assumenda est, incidunt minus esse.span>p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, totam perspiciatis reprehenderit modi harum libero officiis assumenda? Ipsam nostrum vel praesentium recusandae quo numquam sequi eum? Reprehenderit deleniti blanditiis perferendis.span><span>Officia et, sed quisquam nisi nihil suscipit facilis, dolores pariatur dolorem, nesciunt labore. Distinctio odit animi repellendus, consectetur minima repellat laudantium sapiente vel adipisci ad saepe rem earum quis eius.span>p>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
// 第一个p标签字体颜色红色,下面两种方法都可以
// $('p:first').css('color','red');
// $('p:eq(0)').css('color','red');
// jQuery提倡链式操作 大部分jQuery方法中在实现效果的同时会继续返回当前的jQuery对象 可以继续调用其它方法
// $('p').first().css('color','red');
$('p').eq(0).css('color','red');
// 第二个span标签中字体大小32px font-size
$('span:eq(1)').css('font-size','32px');
// 最后一个li的字体水平居中 text-align
$('li:last').css('text-align','center');
// 第四个span和第二个li的字体颜色是蓝色 color
$('span:last,li:eq(1)').css('color','blue');
// 第一、三、五个li背景颜色粉色 background-color
$('li:even').css('background-color','pink');
// 除了第二span以外的所有span标签字体加粗 font-weight
$('span:not(span:eq(1))').css('font-weight','bold');
script>
body>
html>
<script>
// js
// 节点对象 所有的操作都是对对象的属性进行操作
// 对象.属性 对象.属性=值 对象.属性=''
// 操作内容
// 普通双标签 对象.innerHTML 对象.innerText
// 表单控件 对象.value
// 操作样式
// 对象.style
// 对象.className 对象.id
// 操作属性
// 对象.getAttribute() 对象.属性
// 对象.setAttribute() 对象.属性=值
// 对象.removeAttribute() 对象.属性=''
// jq
// 对jQuery对象的方法进行操作
// 对象.方法() 对象.方法(参数)
// 操作内容
// 普通双标签 对象.html() 对象.text()
// 表单控件 对象.val()
// 操作样式
// 对象.css()
// 对象.addClass() 对象.removeClass()
// 对象.toggleClass()
// 操作属性
// 对象.attr() 对象.prop()
// 对象.removeAttr()
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
// 对象
var obj = {
uname : 'shibw',
age : 18 ,
teach : function(){
return 'python web'
}
};
console.log(obj);
// 对象.属性 对象.方法
console.log(obj.uname);
console.log(obj.teach());
console.log(obj["uname"]);
var json = {
"uname":"shibw",
"age":18
}
console.log(json.uname);
console.log(json["uname"]);
// function Person(uname,age){
// this.uname = uname;
// this.age = age
// }
// var p1 = new Person('laowang',18);
// console.log(p1);
// 遍历对象
for(var key in obj){
console.log(key, obj[key]);
}
script>
body>
html>
操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
操作标签样式
- 为元素添加id/class属性,对应选择器样式
- 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
- 操作行内样式
css("属性名","属性值") //设置行内样式
css(JavaScriptON对象) //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
*/
练习：使用jq实现加大加粗显示输入内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用jq实现demo.htmltitle>
head>
<body>
<input id="wd" type="text" placeholder="请输入内容">
<h1 id="show">加大加粗显示内容，用jquery实现h1>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
//$wd jquery变量以$开头，方便区分
var $wd = $('#wd');
// var $show = $('#show');
$wd.on('input',function(){
//$('#show').html( 'ok' ); //
$('#show').html( $wd.val() );
});
// var wd = document.getElementById('wd');
// var show = document.getElementById('show');
// wd.oninput = function(){
// show.innerHTML = wd.value;
// }
script>
body>
html>
切换页面样式-JQ
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>切换页面样式-JQtitle>
<style>
a{
color: #222;
text-decoration: none;
}
ul{
margin: 0;
padding: 0;
/* 清除列表样式 */
list-style: none;
overflow: hidden;
}
li{
float: left;
}
.first>a{
color: #999;
}
.item{
margin-left: 30px;
padding: 0 5px;
}
.active{
background-color: red;
/* color: #fff; */
}
.active>a{
color: #fff;
}
style>
head>
<body>
<ul>
<li class="first"><a href="#">难度：a>li>
<li class="item "><a href="javascript:;">全部a>li>
<li class="item active"><a href="#">初级a>li>
<li class="item "><a href="#">中级a>li>
<li class="item "><a href="#">高级a>li>
ul>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
// 为所有.item添加点击事件
// 点击后删除当前页面中带有.active 的元素的class active
// 为当前被点击的元素添加class active
$('.item').on('click',function(){
// this获取的是页面元素的节点对象可以直接调用js中的属性和方法 但不能使用jq中提供的方法
// console.log( 'ok' ); //调试验证
// console.log( $(this) ); //转换成jq对象
// $('.active').removeClass('active');
// $(this).addClass('active');
// 找到当前元素 添加class active 找到带有class active的兄弟 移除它的class active
$(this).addClass('active').siblings('.active').removeClass('active');
})
// 通过页面中的层级结构查找页面元素
// $(this).parent() 父元素
// $(this).parents('选择器') 祖先元素
// $(this).siblings('选择器') 所有兄弟元素
script>
body>
html>
操作标签属性
- attr(“attrName”,“value”)
设置或读取标签属性 - prop(“attrName”,“value”)
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写 - removeAttr(“attrName”)
移除指定属性
练习：操作标签的属性 请阅读并同意协议
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作标签的属性title>
head>
<body>
<input type="checkbox" checked>请阅读并同意协议
<button>注册button>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
// 当用户点击按钮时 如果没有勾选协议前面的复选框时 弹框提示请阅读并同意协议 否则提示正在注册
// 可以通过checked属性判断单选/复选是否被选中
$('button').on('click',function(){
// 查看input的checked属性 attr只查看已写的属性
// console.log( $('input').attr('checked') );
// console.log( $('input').prop('checked') ); //返回true、false
alert( $('input').prop('checked')?'正在注册':'请阅读并同意协议' );
//删除input 标签的type属性
// $('input').removeAttr('type');
})
script>
body>
html>
元素的创建,添加,删除
- 创建：使用$(“标签语法”)，返回创建好的元素
var div = $(""); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("一级标题
"); //创建的同时设置内容，属性和样式
- 作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
- 作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
- 移除元素
$obj.remove(); //移除$obj
练习 添加元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加页面标签title>
head>
<body>
<table border="1px">
<thead>
<tr>
<th>编号th>
<th>班级th>
<th>姓名th>
tr>
thead>
<tbody>
tbody>
table>
<script src="jquery-1.11.3/jquery.min.js">script>
<script>
// 向tbody中添加一行数据
var $tr = $(`1001
2007
tom DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加、删除页面元素title>
head>
<body>
<button>点击向页面中添加h1button>
<script src="jquery.min.js">script>
<script>
$('button').on('click',function(){
// 创建
var $h1 = $('这是使用jq添加的页面标签
');
$h1.css('color','red');
// 添加
// 相同的对象只能添加到页面中一次,再次书写添加将无效
// 作为子元素添加
// 添加到开始
// 将h1追加到body的开始位置
$h1.prependTo('body');
// 在body的开始位置追加h1
// $('body').prepend($h1);
// 添加到末尾
// $h1.appendTo('body');
// $('body').append($h1);
// 作为兄弟元素添加
// $h1.insertBefore($('button'));
// $('button').before($h1);
// $h1.insertAfter($('button'));
// $('button').after($h1);
//直接写，可以加多个
// $('body').prepend('使用jq添加的h1标签
').append('使用jq添加的h1标签
');
});
script>
body>
html>
数据与对象遍历
-
$(selector).each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element){})必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素
-
$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
$.each(Object, function(index, data){});必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- data- 当前的数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>遍历title>
head>
<body>
<ul>
<li>item1li>
<li>item2li>
<li>tiem3li>
ul>
<script src="jquery.min.js">script>
<script>
// 对页面元素的遍历
// $('li').each(function(index,obj){
// console.log(`正在被遍历的是第${index+1}个元素`)
// console.log(obj);//js节点对象
// });
var data = [
{'sid':1001,'sname':'老马','score':99},{'sid':1002,'sname':'老王','score':88},{'sid':1003,'sname':'老赵','score':77}
]
// 对数据的遍历
$.each(data,function(i,o){
console.log(i , o); //控制台返回对象
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<table border="1px">
<thead>
<tr>
<th>学生编号th>
<th>学生姓名th>
<th>学生成绩th>
tr>
thead>
<tbody>
tbody>
table>
<script src="jquery.min.js">script>
<script>
// 将data中的内容放在页面中展示
var data = [
{'sid':1001,'sname':'老马','score':99},{'sid':1002,'sname':'老王','score':88},{'sid':1003,'sname':'老赵','score':77}
]
// 创建一个变量保存拼接好的字符串
// 每次遍历数据时 根据当前数据生成页面中的模板字符串然后拼接在变量中 循环结束后变量中保存的就是所有要添加到页面中的模板字符串
// 将字符串中的内容一次性添加到页面中
var html = '';
$.each(data,function(i,o){
html += `
${o.sid}
${o.sname}
${o.score}
`
});
$('tbody').append(html);
script>
body>
html>
jQuery事件处理
文档加载完毕
原生JavaScript 方法：window.onload
//语法三 常用
$(function(){
//文档加载完毕后执行
})
//语法一
$(document).ready(function (){
//文档加载完毕后执行
})
//语法二
$().ready(function (){
//文档加载完毕后执行
})
区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行
练习：注意查看控制台显示的执行顺序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="jquery.min.js">script>
<script>
// console.log($('h1')); //空的jq对象
// window.onload = function(){
// console.log('onload事件触发');
// $('h1').css('color', 'red');
// }
$(function(){
console.log('2、onload事件触发');
$('h1').css('color', 'red');
})
script>
<script src="demo1.js">script>
<script src="demo2.js">script>
head>
<body>
<h1>hello worldh1>
<script>
console.log('1、页面中最后的代码');
script>
body>
html>
demo1.js
// window.onload = function () {
// console.log('demo1中的功能开始执行');
// $('h1').css('background-color', '#000');
// }
$(function () {
console.log('3、demo1中的功能开始执行');
$('h1').css('background-color', '#000');
})
demo1.js
// window.onload = function () {
// console.log('demo2中的功能开始执行');
// $('h1').css('text-align', 'center');
// }
$(function () {
console.log('4、demo2中的功能开始执行');
$('h1').css('text-align', 'center');
})
事件绑定方式
事件名称省略 on 前缀
//on("事件名称"，function)
$("div").on("click",function(){}); //新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){});
练习：点击标签触发变色
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<h1>事件绑定h1>
<button>点击添加h1button>
<script src="jquery.min.js">script>
<script>
$('button').click(function(){
$('body').prepend('使用jq添加的标签
')
})
// $('h1').click(function(){
// $(this).css('color','red');
// })
// 为动态添加的页面元素绑定事件时 因为代码的执行顺序问题 可能会导致事件绑定时 页面中并没有加载需要绑定事件的元素
// 可以将事件委托给一个页面中已经存在的父元素或祖先元素 然后在绑定事件的同时指定一个触发事件的选择器 如果是选择器指定的元素触发事件 就将事件交给触发事件的元素
// 否则不触发
// 如果一个父元素中有多个子元素做相同的事件操作时 也可以将事件委托给父元素
$('body').on('click','h1',function(){
$(this).css('color','red');
// console.log('ok')
})
script>
body>
html>
省份、城市、区多级下拉菜单练习
<body>
<select name="" id="prov">
<option value="">请选择省份option>
select>
body>
<body>
<select name="" id="prov">
<option value="">请选择省份option>
select>
<script src="jquery.min.js">script>
<script>
var data = [
{'provId':10012,'provname':'河北'},
{'provId':10013,'provname':'吉林'},
{'provId':10014,'provname':'黑龙江'},
{'provId':10015,'provname':'河南'},
]
var html = '';
// 遍历data中的数据
// 取出每一个省份对象 生成option标签 追加到页面中省份下拉菜单中 保留原本的请选择在最上方
$.each(data,function(i,prov){
html += `${prov.provname}`
})
$('#prov').append(html);
script>
body>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<select name="" id="prov">
<option value="">请选择省份option>
select>
<select name="" id="city">
<option value="">请选择城市option>
select>
<script src="jquery.min.js">script>
<script src="data.js">script>
<script>
// 先注释上面的data.js 调试下面的data
// var data = [
// {'provId':10012,'provname':'河北','citys':[
// {'cityId':100121,'cityname':'石家庄市'},
// {'cityId':100122,'cityname':'保定市'},
// ]},
// {'provId':10013,'provname':'吉林','citys':[
// {'cityId':100131,'cityname':'长春市'},
// {'cityId':100132,'cityname':'吉林市'},
// ]},
// {'provId':10014,'provname':'黑龙江','citys':[
// {'cityId':100141,'cityname':'哈尔滨市'},
// {'cityId':100142,'cityname':'齐齐哈尔市'},
// ]},
// {'provId':10015,'provname':'河南','citys':[
// {'cityId':100151,'cityname':'郑州市'},
// {'cityId':100152,'cityname':'开封市'},
// ]},
// ]
var html = '';
$.each(data,function(i,prov){
html += `">${prov.provname}`
})
$('#prov').append(html);
// 加载城市
// 当用户选中下拉菜单中不同的选项时 下拉菜单的值会发生变化 触发change事件
$('#prov').on('change',function(){
// console.log('ok') //调试
// 重置城市下拉菜单,每次发送change选择时，都重置
$('#city').html('');
// 找到用户当前在省份下拉菜单中选中的省份 所对应的省份对象 通过省份对象.citys获取城市列表
// 1.遍历data 获取到每一个省份对象 如果data中的省份对象的provId 和 页面中省份下拉菜单的值相同 说明当前的省份对象就是用户在页面中选中的选项
$.each(data,function(i,prov){
//console.log('$('#prov').val())')
if(prov.provId == $('#prov').val()){
// console.log(prov.citys);
// 2.遍历prov.citys 获取到每一个城市对象
// 每有一个城市对象就生成一个option 追加到页面中城市下拉菜单
var html = '';
$.each(prov.citys,function(i,city){
html += `">${city.cityname}`;
})
$('#city').append(html);
}
})
})
script>
body>
html>
data.js
var data = [{
provname: '浙江省',
provId: 1,
citys: [{
cityname: "杭州市",
cityId: 101,
areas: [{
areaname: "杭州一区",
areaId: 1011
},
{
areaname: "杭州二区",
areaId: 1012
}
]
}, {
cityname: "温州市",
cityId: 102,
areas: [{
areaname: '温州一区',
areaId: 1021
}, {
areaname: '温州二区',
areaId: 1022
}]
}, {
cityname: "宁波市",
cityId: 103,
areas: [{
areaname: '宁波一区',
areaId: 1031
}, {
areaname: '宁波二区',
areaId: 1032
}]
}, {
cityname: "绍兴市",
cityId: 104,
areas: [{
areaname: '绍兴一区',
areaId: 1041
}, {
areaname: '绍兴二区',
areaId: 1042
}]
}]
}, {
provname: '山东省',
provId: 2,
citys: [{
cityname: "济南市",
cityId: 201,
areas: [{
areaname: "济南一区",
areaId: 2011
},
{
areaname: "济南二区",
areaId: 2012
}
]
}, {
cityname: "青岛市",
cityId: 202,
areas: [{
areaname: '青岛一区',
areaId: 2021
}, {
areaname: '青岛二区',
areaId: 2022
}]
}, {
cityname: "济宁市",
cityId: 203,
areas: [{
areaname: '济宁一区',
areaId: 2031
}, {
areaname: '济宁二区',
areaId: 2032
}]
}, {
cityname: "潍坊市",
cityId: 204,
areas: [{
areaname: '潍坊一区',
areaId: 2041
}, {
areaname: '潍坊二区',
areaId: 2042
}]
}]
},
{
provname: '广东省',
provId: 3,
citys: [{
cityname: "广州市",
cityId: 301,
areas: [{
areaname: "广州一区",
areaId: 3011
},
{
areaname: "广州二区",
areaId: 3012
}
]
}, {
cityname: "潮阳市",
cityId: 302,
areas: [{
areaname: '潮阳一区',
areaId: 3021
}, {
areaname: '潮阳二区',
areaId: 3022
}]
}, {
cityname: "澄海市",
cityId: 303,
areas: [{
areaname: '澄海一区',
areaId: 3031
}, {
areaname: '澄海二区',
areaId: 3032
}]
}, {
cityname: "潮州市",
cityId: 304,
areas: [{
areaname: '潮州一区',
areaId: 3041
}, {
areaname: '潮州二区',
areaId: 3042
}]
}]
},
{
provname: '甘肃省',
provId: 4,
citys: [{
cityname: "兰州市",
cityId: 401,
areas: [{
areaname: "兰州一区",
areaId: 4011
},
{
areaname: "兰州二区",
areaId: 4012
}
]
}, {
cityname: "白银市",
cityId: 402,
areas: [{
areaname: '白银一区',
areaId: 4021
}, {
areaname: '白银二区',
areaId: 4022
}]
}, {
cityname: "敦煌市",
cityId: 403,
areas: [{
areaname: '敦煌一区',
areaId: 4031
}, {
areaname: '敦煌二区',
areaId: 4032
}]
}, {
cityname: "定西市",
cityId: 404,
areas: [{
areaname: '定西一区',
areaId: 4041
}, {
areaname: '定西二区',
areaId: 4042
}]
}]
}
]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<select name="" id="prov">
<option value="">请选择省份option>
select>
<select name="" id="city">
<option value="">请选择城市option>
select>
<select name="" id="area">
<option value="">请选择地区option>
select>
<script src="jquery.min.js">script>
<script src="data.js">script>
<script>
//声明下查找的相关变量
var $prov = $('#prov');
var $city = $('#city');
var $area = $('#area');
// 加载省份
var html = '';
$.each(data,function(i,prov){
html += `">${prov.provname}`
})
$prov.append(html);
// 加载城市
$prov.on('change',function(){
$city.html('');
$area.html('');
$.each(data,function(i,prov){
if(prov.provId == $prov.val()){
var html = '';
$.each(prov.citys,function(i,city){
html += `">${city.cityname}`;
})
$city.append(html);
}
})
})
// 加载地区
$city.on('change',function(){
$area.html('');
$.each(data,function(i,prov){
if(prov.provId == $prov.val()){
$.each(prov.citys,function(i,city){
if(city.cityId == $city.val()){
var html = '';
$.each(city.areas,function(i,area){
html += `">${area.areaname}`
})
$area.append(html);
}
})
}
})
// 遍历data 获取到每一个省份对象
// 如果当前省份对象的provId 和 省份下拉菜单中的值相同时 找到当前的省份 通过省份.citys获取所有的城市
// 遍历省份.citys 如果当前城市对象的cityId 和 城市下拉菜单的值相同 说明当前用户选择的城市
// 通过城市.areas获取所有地区
})
script>
body>
html>
this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。
内置对象
Array 数组
1. 创建
var arr = [];
2. 特点
- 数组用于存储若干数据,自动为每位数据分配下标,从0开始
- 数组中的元素不限数据类型,长度可以动态调整
- 动态操作数组元素 ：根据元素下标读取或修改数组元素，arr[index]
3. 属性和方法
-
属性 : length 表示数组长度,可读可写
-
方法 :
-
push(data)
在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
返回添加之后的数组长度 -
pop()
移除末尾元素
返回被移除的元素 -
unshift(data)
在数组的头部添加一个或多个元素
返回添加之后的数组长度 -
shift()
移除数组的第一个元素
返回被移除的元素 -
splice(index,num)
从数组中添加/删除项目
返回被删除的项目
-
toString()
将数组转换成字符串类型
返回字符串结果 -
join(param)
将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
返回字符串 -
reverse()
反转数组,倒序重排
返回重排的数组,注意该方法直接修改原数组的结构 -
sort()
对数组中元素排序,默认按照Unicode编码升序排列
返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法
例：//自定义升序 function sortASC(a,b){ return a-b; } //自定义降序 function sortDESC(a,b){ return b-a; } //如果返回值>0,交换元素的值,b-a表示降序排列作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列
-
<script>
// 数组
var arr = [1,2,3,4,5];
console.log(arr);
console.log(arr[0]);
// 索引值从0开始依次递增 没有负数索引
// arr.length-1
console.log(arr[arr.length-1]);
arr[2] = 3.14;
console.log(arr);
// 数组是可变的 可以是不连续的
arr[10] = 'hello';
console.log(arr);
console.log(arr[10]);
// 创建数组
// 创建指定长度的数组
// var arr2 = new Array(5);
// console.log(arr2);
var arr2 = new Array(1,2,3,4,5);
console.log(arr2);
// 遍历数组
for(var i=0;i<arr2.length;i++){
console.log(arr2[i]);
}
for(var i in arr2){
// 数组的索引本质上是字符串
console.log(typeof i);
console.log(i,arr2[i]);
}
// console.log(arr2[0:3])
console.log(arr2.slice(0,3));
script>
String 对象
1. 创建
var str = "100";
2. 特点
字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始
3. 属性
length ：获取字符串长度
4. 方法
-
转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串 -
获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0 -
获取指定字符的下标
- indexOf(str,fromIndex)
作用 : 获取指定字符的下标,从前向后查询,找到即返回
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回 :
返回指定字符的下标,查找失败返回-1
- indexOf(str,fromIndex)
-
截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾 -
substr(startIndex,len)
作用：根据下标截取指定的字符串
-
分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组
Math 对象
1. 定义
Math对象主要提供一些列数学运算的方法
2. 属性
- 圆周率 : Math.PI
- 自然对数 : Math.E
3. 方法
- Math.random(); 生成0-1之间的随机数
- Math.ceil(x); 对x向上取整,忽略小数位,整数位+1
- Math.floor(x); 对x向下取整,舍弃小数位,保留整数位
- Math.round(x); 对x四舍五入取整数
日期对象
1. 创建日期对象
1. var date2 = new Date("2011/11/11");
2. var date3 = new Date("2011/11/11 11:11:11");
2. 日期对象方法
- 读取或设置当前时间的毫秒数：getTime()
- 获取时间分量
- getFullYear() 获取四位年份
- getMonth() 获取月份，取值范围0~11
- getDate() 获取日期
- getHours() 获取小时
- getMinutes() 获取分钟
- getSeconds() 获取秒钟
- 时间差
- 日期对象之间可以直接相减，获取时间差(毫秒)