JS|jQuery

最新推荐文章于 2024-05-07 11:07:47 发布

汤姆猫少年

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量612

点赞数

分类专栏：笔记文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_45684867/article/details/116142276

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：
0.数组的方法
1.获取活动对象
2.form表单属性
3.鼠标键盘事件
4.页面事件
5.文档对象document
- 5.1文档常用属性
- 5.2文档常用方法
6.（form）表单对象
- 6.1访问表单与表单元素
- - 6.1.1JS访问表单
  - 6.1.2JS访问表单元素
- 6.2表单对象的属性、方法与事件
- 6.3表单元素
- - 6.3.1文本框的属性
  - 6.3.2文本框的方法
- 6.4（button）按钮
- - 6.4.1 按钮的属性
  - 6.4.2 按钮的方法
- 6.5单选框、复选框
- - 6.5.1单选框和复选框的属性
  - 6.5.2单选框和复选框的方法
- 6.6（select）下拉菜单
- input中的属性
7.(img)图像对象
8.（DOM）文档对象模型
9.Window窗口对象
10.Ajax
- 10.1 讲解案例（1）
- jquery、vue、js中的Ajax对比
11. jQuery
- 11.1 jQuery基础
- 11.2 jQuery控制页面
- 11.3 JQuery事件处理
- 11.4 JQuery动画效果

前言：

confirm (输出的文本）弹出确认框

Math对象、Date对象

JS中自带Math对象、Date对象，封装了属性和方法
Math不需要创建对象，直接 Math.方法调用
Date需创建，var DT= new Date();

JS中严格区分大小写——HTML中不需要

编码：encodeURI():对网络地址有意义部分进行编码

解码：decodeURI():对网络地址有意义部分进行解码

Function() 构造函数：

形式 var a = Function(“参数1”，“参数2”,…,“函数体”)
a(1,2);其中a只是指向函数的变量。

创建自定义对象

<script type="text/javascript">
var a=new object(); //创建空对象a
a.name="王五"; //添属性
a.show=function(){alert(name);}; //添方法
//with(对象名){语句}
with(a){show}//直接调用a中的show方法
</script>

（prototype）属性添加

例子：

<script type="text/javascript">
function a(q){
this.q=q;
}
a.prototype.pi=3.14;//给a中添加pi属性并赋值
a.prototype.area=function(){
return this.pi+this.q;//给a中添加area方法
}q
</script>

0.数组的方法

var a = new arr();

方法	说明
concat()	将其他数组连接到当前数组的末尾
push()	向数组的末尾添加一个或多个元素
unshift()	向数组的开头添加一个或多个元素
pop()	把数组中的最后一个元素从数组中删除，并返回删除元素的值
shift()	把数组中的第一个元素从数组中删除，并返回删除元素的值
splice()	把数组中的第一个元素从数组中删除
reverse()	颠倒数组中元素的顺序
sort()	对数组的元素进行排序，按首字母顺序排序
slice()	获取数组中某段数组的元素(从0开始，-1则为最后一个)
toString()	把数组转换成字符串
toLocaleString()	把数组转换成本地字符串
jion()	将数组的所有元素放入一个字符串中

this.message = this.message.split(’’).reverse().join(’’)：字符串倒序
sort()的去重方法：

<script>
var a = ['apple',3,'banana',3,'pear',2,3,'apple'];
Array.prototype.chongfu=function() {
  var tmp = [];
  this.sort(function(a,b){
    if(a==b && tmp.indexOf(a) === -1) tmp.push(a);
  });
  return tmp;
}
console.log(a.chongfu())
</script>

1.获取活动对象

var e=window.event 获取事件对象
var obj =e.srcElement 获取发生事件元素

用处：
e.x 获取鼠标x值
e.y 获取鼠标y值
obj.style.background 改变事件元素背景 obj.value 获取事件元素值

2.form表单属性

必须有return，否则执行都为true
onsubmit =“return funcname()” 提交触发事件，若funcname返回true才可以提交
onreset =“return funcname()” 重置触发事件，若funcname返回true才可提交
例子:(此处有方法遍历表单元素)

此处eval()：计算表达式并运行其中java代码。
obj.txt1.value:其中txt1是标记中的name属性。

3.鼠标键盘事件

鼠标
onclick 鼠标单击
onmousedown 鼠标按下
onmouseup 鼠标松开
onmouseover 鼠标移入
onmouseout 鼠标移出
onmousemove 鼠标移动
键盘
onkeypress 按下并释放
onkeydown 按下
onkeyup 松开
为了更好利用键盘事件，需对照对应键码值
键盘例子：按下A键刷新页面

<script type="text/javascript">
function Refurbish(){
//定义Refurbish()函数
if (window event.keyCode==65){
//如果按下了键盘上的A键
location.reload();
//对页面进行刷新
}}
document.onkeydown=Refurbish;
//当按下键盘上的按键时调用函数
</script>
<img src="1jpg" width="805" height="554">

4.页面事件

onload 加载完毕
onunload 卸载页面（刷新，关闭当前页，跳转到其他页面）
例如：
onresize 页面大小被改变
例如：<body οnresize="shows()>

5.文档对象document

5.1文档常用属性

all[ ] 存储HTML标记的一个数组
forms[ ] 存储表单对象的一个数
images[ ] 存储图像对象的一个数
links[ ] 存储link对象的一个数
title 文档标题对象
body 文档主体对象
readyState 某个对象当前状态
URL 获取或设置URL

以下都对应里的属性
alinkColor 被单击时的链接颜色
linkColor 未被访问的链接颜色
vlinkColor 已经被访问的链接颜色
all[ ] 存储HTML标记的一个数组
bgColor 文档背景颜色(body中的)
fgColor 文档文字颜色

5.2文档常用方法

close 关闭文档输出流
open 打开文档接收write和writeln
write 向文档中写入HTML或js语句
writeln 写入HTML或js，并换行！pre中
createElement 创建一个HTML标记
getElementById 获取指定id的HTML标记

例子：1.动态添加文本框并设定属性

 <script type="text/javascript">
function addInput(){
var txt=document.createElement("input");
//动态添加一一个input文本框
txt.type="text";
//为添加的文本框type属性赋值
txt.name="txt";
//为添加的文本框name属性赋值
txt.value="动态添加的文本框":
//为添加的文本框value属性赋值
document.form1.appenChild(txt):
//把文本框作为子节点追加到表单中
</script>
 </head>
<body background="bg.gif">
<form name="form1">
<input type="button" name="btn1" value="添加按钮" onclick="addInput()" />
</form>

2.获取文本框并修改内容

<script type="text/javascript">
function chg(){
var t=document.getElementById("txt");
t.value="修改后的内容";
}
</script>
<input type="text" id="txt" value="初始内容" />
<input type="button" name="btn" value="更改按钮" onclick="chg()" />

6.（form）表单对象

6.1访问表单与表单元素

6.1.1JS访问表单

<form id="form1" name="myform" method="post" action="">
用户名：<input type="text" name="username" size="15"></br>
密码：  <input type="password" name="password" maxlength="8" size="15"></br>
	   <input type="submit" name="sub1" value="登录">
</form>

访问以上表单的方式：

document.forms[0]——通过Form对象数组forms访问
document.myform——通过表单 name属性访问
document.getElementById(“form1”)——通过表单id访问

6.1.2JS访问表单元素

<form  name="form1" method="post" action="">
用户名：<input type="text" id="user" name="username" size="15"></br>
密码：  <input type="password" name="password" maxlength="8" size="15"></br>
	   <input type="submit" name="sub1" value="登录">
</form>

访问以上表单元素的方式：

document.form1.elements[0]——访问name=form1表单的第一个元素
document.form1.username——通过表单 name属性访问
document.getElementById(“user”)——通过表单id访问

6.2表单对象的属性、方法与事件

6.2.1表单对象的属性

属性	说明
name	返回或设置表单的名称
action	返回或设置表单提交的URL
method	返回或设置表单的提交方式（get、post）
encoding	返回或设置表单信息的提交编码方式
id	返回或设置表单的id
length	返回表单对象中的元素个数
target	返回或设置提交表单时目标窗口的打开方式（_blank、_self、_parent、_top、framename）
elements	返回表单对象中的元素构成的数组（数组中的元素也是对象）

6.2.2表单对象的方法

方法	说明
reset()	将所有表单元素重置为初始值，等于单击了重置按钮
submit()	提交表单数据，等于单击了提交按钮

6.2.3表单对象的事件

事件	说明
reset	重置表单时触发事件
submit	提交表单时触发事件

6.3表单元素

6.3.1文本框的属性

属性	说明
id	返回或设置文本框中的id属性值
name	返回或设置文本框的名称
type	返回或设置文本框的类型
value	返回或设置文本框中的值
rows	返回或设置多行文本框的高度
cols	返回或设置多行文本框的宽度
disabled	返回或设置文本框是否被禁用（true、false）

6.3.2文本框的方法

方法	说明
blur()	焦点移出文本框
focus()	焦点赋给文本框
click()	模拟文本框被鼠标单击
select()	选中文本框中的文字

<input type="image" name="imageField" onclick="return checkinput()" src="images/ig.gif"> <!--登录按钮-->
<script type="text/javascript">
function checkinput(){
if(form1.user.value==""){
alert("请输入用户名!");
form1.user.focus();   //为name为user的文本框设置焦点
return false; //返回false不允许提交表单
}
return true; //返回true允许提交表单
}
</script>

6.4（button）按钮

6.4.1 按钮的属性

属性	说明
id	返回或设置按钮中的id属性值
name	返回或设置按钮的名称
type	返回或设置按钮的类型
value	返回或设置按钮中的值
disabled	返回或设置按钮是否被禁用（true、false）

6.4.2 按钮的方法

方法	说明
blur()	焦点移出按钮
focus()	焦点赋给按钮
click()	模拟按钮被鼠标单击

6.5单选框、复选框

6.5.1单选框和复选框的属性

属性	说明
id	返回或设置框中的id属性值
name	返回或设置框的名称
type	返回或设置框的类型
value	返回或设置框中的值
length	返回或设置框中包含元素个数
checked	返回或设置框中的选中状态（true、false）若单选框很多，则只有最后一个checked被选中
disabled	返回或设置框是否被禁用（true、false）

6.5.2单选框和复选框的方法

方法	说明
blur()	焦点移出框
focus()	焦点赋给框
click()	模拟框被鼠标单击

例子：获取用户姓名、选择性别、爱好

<form id="form1" name="fomr1" method="post" onSubmit="getInfo()">
<input type="text" name="name" />
<input type="radio" name="sex" value="男" />
<input type="radio" name="sex" value="女" />
<input type="checkbox" name="interest" value="看电影" />
<input type="checkbox" name="interest" value="听歌" />
<input type="checkbox" name="interest" value="打球" />
<input type="checkbox" name="interest" value="看书" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<script type="text/javascript">
function getInfo(){
var msg="";
msg += "姓名："+form1.name.value +"\n"; //获取用户名，连接字符串
msg +="性别：";
for(var i=0;i<form1.sex.length;i++){ //循环单选框按钮
	if(form1.sex[i].checked){  //如果被选中
		msg += form1.sex[i].value+"\n"; //拼接信息
		}
}
msg +="爱好：";
for(var i=0;i<form1.interest.length;i++){ //循环多选框按钮
	if(form1.interest[i].checked){  //如果被选中
		msg += form1.interest[i].value+"\n"; //拼接信息
		}
}
alert(msg); //弹出信息
}
</script>

6.6（select）下拉菜单

6.6.1下拉菜单的属性

属性	说明
id	返回或设置select的id属性值
name	返回或设置select的名称
type	返回或设置select的类型
value	返回或设置select的值
multiple	是否能多选（true、false）true的话按住ctrl就能多个选择
length	返回select中的选项数
options	返回一个select中选项的数组
selectedIndex	返回或设置select中当前选中的选项在options[ ]中的下标
disabled	返回或设置select是否被禁用（true、false）

6.6.2下拉菜单的方法

方法	说明
blur()	焦点移出select
focus()	焦点赋给select
click()	模拟select被鼠标单击
remove(i)	删除select中的选项，i为options[ ]下标

6.6.3Option对象

每个选项都能看做一个Option对象
创建下拉菜单的构造函数：

new Option(text,value,defaultSelected,selected)

document.myform.myselect.option[0] = new Option(“文字”，“值”)

属性	说明
text	返回或设置选项的文字
value	返回或设置选项的值
selected	返回或设置选项当前是否被选中（true、false）
index	返回选项在options[ ]数组中的下标
defaultSelected	布尔值，是否默认选项（true、false）

二级联动菜单例子：

<body>
    <form name="form1" action="#"  method="POST">
<select name="firstselect" id="" onchange="show()">
    <option value="a">a</option>
    <option value="b">b</option>
</select>
<select name="secondselect" id="">
    <option value="a1">a1</option>
    <option value="a2">a2</option>
</select>
<!-- <input type="button" οnclick="show()"> -->
    </form>
    
</body>
<script type="text/javascript">
//初始化全局变量
var aVal= new Option("a1","a1");
var aval1=new Option("a2","a2");
var bVal= new Option("b1","b1");
var bval1=new Option("b2","b2");
var a=[aVal,aval1];
var b=[bVal,bval1];
//改变监听时调用的方法
    function show(){
       console.log( eval(a.length))
       console.log( eval(b.length))
   var Slength=document.form1.firstselect.length;//获取第一个select选项个数
    for(var i=0;i<Slength;i++){
        if(document.form1.firstselect[i].selected) //是否被选中
        var Szhi=document.form1.firstselect[i].value; //赋值
        document.all("secondselect").options.length = 0; //清空第二个select选项
        console.log(Szhi);
    }
    switch(Szhi){//判断选项的值
        case 'a': 
        var along=a.length;//初始化循环加入选项次数
        while(along){
        document.form1.secondselect.options[document.form1.secondselect.options.length]=a[along-1] ;//放入选项
        along--;
        }
        console.log('a');
            break;
        case 'b': 
        var blong=b.length;//初始化循环加入选项次数
        while(blong){
        document.form1.secondselect.options[document.form1.secondselect.options.length]=b[blong-1] ;//放入选项
        blong--;
        }
        console.log('b');
            break;
    }
}
    </script>

input中的属性

在这里插入图片描述
autocomplete：表单是否自动完成
novalidate：提交表单时取消对表单验证
autofocus：页面加载时是否自动获取焦点

list属性的应用

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

max、min、step、pattern的限制:

 输入 1980-01-01 之前的日期:
  <input type="date" name="bday" max="1979-12-31"><br>

 输入 2000-01-01 之后的日期:
  <input type="date" name="bday" min="2000-01-02"><br>

  数量 (在1和5之间，加了step只能取1 3 5了):
  <input type="number" name="quantity" min="1" max="5" step="2">
  输入三个英文字母（正则表达式）
  <input type="text"  pattern="[A-Za-z]{3}" >
<br>

7.(img)图像对象

<img name="flower" id="mypic" src="flower.png">

访问以上图片方法：
document.images[0]
document.images[“flower”]
document.getElementById(“mypic”)

7.1.1图片属性

属性	说明
border	返回或设置图片的边框宽度，单位：px（像素）
height	——图片的高度，——
hspace	——左右字体与图片之间的距离，——
lowsrc	——替代原图的低分辨率图URL
name	——图片名称
src	——图片路径
vspace	——上下字体与图片之间的距离，——
width	——图片的宽度，——
alt	——图标经过图片显示的字
complete	判断图片是否加载完成（true，false）

7.1.2图像对象的事件

事件	说明
abort	用户放弃加载图片触发
load	图片加载成功——
error	图片加载中出现错误——
click	单击图片——
dblclick	双击图片——
mouseover	鼠标移动到图片上——
mouseout	鼠标从图片上移开——
mousedown	图片上按下鼠标时——
mouseup	图片上释放鼠标时——
mousemove	图片上移动鼠标——

案例1：（换图）

<img name="book1" src="images/book1.jpg" onMouseOver="changeImage('book1')"  onMouseOut="resetImage('book1')" >
<script type="text/javascript">
function changeImage(imageName){
document.images[imageName].src = 'images/book2.jpg'; //图片转换2
}
function resetImage(imageName){
document.images[imageName].src = 'images/book1.jpg'; //图片转换1
}
</script>

案例2：（随机背景图）

<script type="text/javascript">
function changebg(){
var i =Math.floor(Math.random()*3);//获取0-3之间的随机数floor向下取整
var src=""; 		//初始化变量
switch(i){		//判断
	case 0:  
		src = "0.jpg";
		break;
	case 1:
		src = "1.jpg";
		break;
	case 2:
		src = "2.jpg";
		break;
	}
	document.body.background=src;  //变换背景图
	setTimeout("changebg()",1000); //每隔一秒调用一次changebg()进行背景变换
}
</script>

案例3：（图片置顶）

<div id="Tdiv" style="height:45px;left:0px;position:absolute;top:0px;width:45px;z-index">
    <input name="image1" type="image" id="image1" src="1.jpg" border="0">
</div>
<p>
   <script>
       var imgW=parselnt(imge1.width);
       function permute(tfloor,Top,width){
           //获取纵向滚动条距离
           var RealTop = parselnt(document.documentElement.scollTop);
           buyTop=Top+RealTop;//获取图片在垂直方向的绝对位置
           document.all[tfloor].style.top=buyTop+"px";//设置图片在垂直方向上的位置
           //获取图片在水平方向上的绝对位置
           var buyLeft=parselent(document.documentElement.scrollLeft)+parselent(document.documentElement.clientWidth)-imgW;
           document.all[tfloor].style.left=buyLeft-left+"px";
       }
       setInterval('permute("Tdiv",2,2)',1);//每隔一毫秒执行一次permute函数
    </script> 
    <img src="2.jpg">

7.1.3滤镜效果

滤镜名称	参数说明
alpha(设置透明度)	filter:alpha(opacity=0_{100,finishOpacity=0}100,style=0_3,startX=0100,startY=0_100,finshX=0100)， opacity:表示透明度，finishOpacity:设置渐变透明度，表示透明区域的形状；startX,startY:开始的位置；finishX,y:结束的位置
blendTrandTrans	设置滤镜淡入淡出效果 filter:blendTrans(duration=time)，括号里表示持续的时间
blur	设置滤镜的模糊效果，filter:blur(add=true\|false,direction=value,strength=value)。 q其中add:确定图片是否为模糊效果。direction:设置模糊效果的方向，以度数为单位。strength:设置模糊效果的像素数
chroma	设置指定颜色为透明状态，filter:chroma(color=value)。color说明颜色值
dropShadow	设置滤镜的阴影效果，filter:dropShadow(color=value,offX=value,offY=value,positive=true\|false)。color:表示阴影得到颜色。offX、offY:表示阴影的偏移量，值为像素。positive:设置其值为ture则是透明的像素建立投影，false则为不透明给的像素建立投影
filpH	设置滤镜为水平翻转效果，filter:filpH
filpV	设置滤镜为垂直翻转效果，filter:filpV
glow	设置滤镜为发光效果，filter:glow(color=value,strength=value)。color:用于设置滤镜发光的颜色，strength：设置发光的亮度，在0~255之间
gray	将可视对象变为灰度显示，filter:gray
invert	翻转可视对象的色调和亮度，创建底片效果，filter:invert
Light	模拟光源在可视对象上的投影，filter:Light
Mask	设置透明膜效果，filter:Mask(color=value)。color：表示透明膜的颜色
RevealTrans	设置滤镜转换效果，可以使可视化对象显示或隐藏
shadow	设置滤镜为立体式阴影效果。fliter:shadow(color:value,direction=value)。color:表示阴影颜色,direction:表示阴影方向
wave	设置滤镜的波形效果。filter(add=true\|false,freq=value,lightStrength=0_100,phase=0100,strength=value)。add:表示是否按正弦波显示，freq：设置波形的频率，lightStrength：设置波形的光影效果，phase:设置波形开始时的偏移量，strength：设置波形的振幅
Xray	设置X光效果，filter:Xray

案例1.（图像翻转）

<script type="text/javascript">
    function Hturn(){
        image11.style.filter=image11.style.filter=="filpH"?"":"filpH"
}
</script>
<input type="button" name="button1" value="水平翻转" onClick="Hturn()">

案例2——知识点补充

方法	说明
innerHTML	设置或获取位于对象起始和结束标签内的 HTML
scrollHeight	获取对象的滚动高度。
scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth	获取对象的滚动宽度
offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

案例2.（图像无缝滚动）

<style type="text/css">
    
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 300px;
    text-align: center;
    float: left;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    display: block;
    }
    
    </style>
    向上滚动
    <body>
    <div id="demo">
    <div id="demo1">
    <a href="#"><img src="data/bg1.png" border="0" /></a>
    <a href="#"><img src="data/bg1.png" border="0" /></a>
    <a href="#"><img src="data/header1.jpg" border="0" /></a>
    <a href="#"><img src="data/qwe.jpg" border="0" /></a>
    <a href="#"><img src="data/radius.png" border="0" /></a>
    </div>
    <div id="demo2"></div>
    </div>
    
    <script>
    var speed=10; //数字越大速度越慢

    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
    function Marquee(){
    if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
    tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
    else{
    tab.scrollTop++
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
     </script>

8.（DOM）文档对象模型

8.1.1DOM对象节点属性

属性	说明
nodeName	节点名称
nodeValue	节点值，通常只应用于文本节点
nodeType	节点类型
parentNode	返回当前节点的父节点
childNodes	子节点列表
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
attributes	元素的属性列表
obj.appendChild(newChild)	新子节点放入到obj内末尾
obj.cloneNode(Boolean)	复制当前obj节点，区别：（true）深度全复制，（false）非深度子节点不复制
obj.removeChild(oldChild)	删除obj中的一个子节点
obj.replaceChild(new,old)	将旧的节点替换成新的节点
obj.replaceChild(new,old)	将旧的节点替换成新的节点

8.1.2节点操作

案例1（创建节点）

创建节点的时候，要先通过使用文档对象中的createElement()跟createTextNode()生成一个新元素，并且生成文本节点。最后再使用appendChild()方法将创建的新节点台南佳到当前节点的末尾。
实例：
<div id="poemDiv">
    <div class="poemtitle">春晓</div>	
    <div class="poem">春眠不觉晓</div>
    <div class="poem">处处闻啼鸟</div>        
    <div class="poem">夜来风雨声</div>
</div>
<form name="myform">
    请输入最后一句话：<input type="text" name="last">
    <input type="button" value="添加" onClick="completePoem()">
</form>
<script type="text/javascript">
    function completePoem(){
    var div = document.createElement('div');//创建div元素
    div.className='poem';//为div元素添加css类
    var last = myform.last.value;//获取用户输入的故事最后一句
    txt=document.createTextNode(last);//创建文本节点
    div.appendChild(txt);//将文本节点添加到创建的div元素中
    document.getElementById('poemDiv').appendChild(div);
        }
</script>

案例2（插入节点）

插入节点，必须得在插入之前创建一个节点，并且声明需要插入的位置是在哪。
<script type="text/javascript">
    function crNode(str){
       
        var newP=document.createElement("p");//创建p元素
        var newTxt=document.createTextNode(str);//创建文本节点
        newP.appendChild(newTxt);//将文本节点添加到创建的p元素
        return newP;
    }
    function insetNode(nodeId,str){
        var node=document.getElementByde(nodeId); //获取要插入的位置的id
        var newNode=crNode(str);//创建节点
        if(node.parentNode)//判断是否拥有父节点
            node.parentNode.insertBefore(newNode,node);//插入指定元素的前面
    }
</script>
<body background="">
    <h2 id="h">
        在上面插入节点
    </h2>
    <form id="frm" name="frm">
        输入文本:<input type="text" name="txt" />
        <input type="button" value="前插入" οnclick="insetNode('h',document.frm.txt.value)";/>
    </form>
</body>

案例3（复制节点）

<script type="text/javascript">
	function AddRow(bl){
		var sel=document.getElementById('shopType'); //获取指定的id
		var newSelect=sel.cloneNode(bl); //复制节点
		var b=document.createElement("br"); //创建br元素（换行）
		  di.appendChild(newSelect); //将复制的新节点添加到指定节点末尾
		  di.appendChild(b);//将创建的br元素添加到指定节点的末尾
		}
</script>
<form>
	<hr>
	 <select name="shopType" id="shopType">
	  <option value="%">请选择类型</option>
	  <option value="0">数码电子</option>
	  <option value="1">床上用品</option>
	 </select>
	<hr>
<div id="di"></div>
	<input type="button" value="复制" onClick="AddRow(false)">
	<input type="button" value="复制" onClick="AddRow(true)">
</form>

案例4（删除节点）

删除节点，选择要删除的节点进行删除
<script type="text/javascript">
    function delNode(){
        var deleteN=document.getElementById("di");
        if(deleteN.hasChildNodes()){
            deleteN.removeChild(deleteN.lastChild);//删除节点
        }
    }
</script>
<div id="id">
    <p>
        123
    </p>
    <P>
        2323
    </P>
    <form type="button" value="删除" onclick="delNode" />
    </form>
</div>

案例5（替换节点）

<script type="text/javascript">
	function repN(str,bj){
		var rep=document.getElementById('b1'); //获取指定的id
		if(rep){  //如果id存在
		var newNode=document.createElement(bj); //创建节点
		newNode.id="b1"; //设置节点的id属性值
		var newText=document.createTextNode(str); //创建文本节点
		newNode.appendChild(newText); //将文本节点添加到创建的节点元素中
		rep.parentNode.replaceChild(newNode,rep); //替换节点
		}
}
</script>
<b id="b1"> 要被替换的文本内容</b>
<p>
输入标记：<input id="bj" type="text" size="15"/></br>
输入文本：<input id="txt" type="text" size="15"/></br>
<input  type="button" value="替换" onclick="repN(txt.value,ji.value)"/></br>

案例6（图片轮换）

   <div id="tabs">
        <a name="i" href="#"><img src="data/bg1.png" width="100%" height="320"/></a>
        <a name="i" href="#"><img src="data/qwe.jpg" width="100%" height="320"/></a>
    </div>
    <script type="text/javascript">
    var len=document.getElementsByName("i");
    var pos=0;
    function changeimage(){
        len[pos].style.display="none";
        pos++;
        if(pos==len.length) pos=0;
        len[pos].style.display="block"; 
    }
    setInterval('changeimage()',2000)
    </script>

案例7（实时时间）

 	<div id="time"></div>
    <div id="greet"></div>
    <script type="text/javascript">
    window.onload=ShowTime; //页面加载完毕后执行函数
    function ShowTime(){
        var strgreet="";
        var datatime=new Date();
        var hour=datatime.getHours();
        var minu=datatime.getMinutes();
        var seco=datatime.getSeconds();
        strtime=hour+":"+minu+":"+seco+"";
        if(hour>=0 && hour<18){
            strgreet='白天好';
        }else  strgreet='晚上好';
    
        window.setTimeout("ShowTime()",1000); //每隔1秒重新获取时间
        document.getElementById('time').innerHTML="现在是：<b>"+strtime+"<b>";
        document.getElementById('greet').innerText="<b>"+strgreet+"</b>";
    }
    </script>

9.Window窗口对象

9.1Window对象的属性

属性	说明
document	对话框显示的当前文档
frames	表示当前对话框中所有frame对象的集合
location	指定当前文档的URL
name	对话框的名字
status	状态框中的当前信息
defaultStatus	状态栏中的默认信息
top	表示最顶层的浏览器对话框
parent	表示包含当前对话框的父对话框
opener	表示打开当前对话框的父对话框
closed	表示当前对话框是否关闭的逻辑值
self	表示当前对话框
screen	表示用户屏幕，提供屏幕尺寸、颜色深度等信息
navigator	表示浏览器对象，用于获得与浏览器相关的信息

9.2Window对象的方法

方法	说明
alert()	弹出警告对话框
confirm()	确认框
prompt()	提示对话框
open()	打开新浏览器对话框并且显示由URL或名字引用的文档，并设置创建对话框的属性
close()	关闭被引用的对话框
focus()	将被引用的对话框放在所有打开对话框的前面
blur()	将被引用的对话框放在所有打开对话框的后面
scrollTo(x,y)	把对话框滚动到指定的坐标
scrollBy(offsetx,offsety)	按照指定的位移量滚动对话框
setTimeout(timer)	在指定的毫秒数过后，对传递的表达式求值
setInterval(interval)	指定周期性执行代码
moveTo(x,y)	将对话框移动到指定坐标出
moveBy(offsetx,offsety)	将对话框移动到指定的位移量处
resizeTo(x,y)	设置对话框的大小
resizeBy(offsetx,offsety)	按照指定的位移量设置对话框的大小
print()	相当于浏览器工具栏中的“打印”按钮
navigate(URL)	使用对话框显示URL指定的页面

9.3Window对象的使用

Window对象可以直接调用方法和属性：
window.属性名
window.方法名（参数列表）

window.alert(“字符串”);
window.document.write(“字符串”);

JavaScript允许使用一个字符串来给窗口命名，例如一些特定的。
self——当前窗口
parent——父级窗口等
可以用这些关键字代表 window
parent.属性名
parent.方法名（参数列表）

9.4 窗口历史（history）

属性和方法	说明
length	历史列表的长度
current	当前文档的URL
next	历史列表的下一个URL
previous	历史列表的前一个URL
back()	回退一次
forward()	重新进入下一页
go()	进入指定的网页

<a href="javascript:window.history.forward();">forward</a>
<a href="javascript:window.history.back();">back</a>
<a href="javascript:window.history.go(-1);">后退一次</a>
<a href="javascript:window.history.go(2);">前进两次</a>
<a href="javascript:window.history.go(window.history.length-1);">末尾</a>

10.Ajax

10.1 讲解案例（1）

<script>
function loadXMLDoc()
{   
    //第一步：定义执行代码
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
    //第二步：定义function：请求步骤： 0：请求未初始化 1：服务器连接已经建立 2：请求已接收 3：请求处理中 4：响应内容解析完成，可以在客户端进行使用。

请求状态码： 200：OK 404:未找到页面 5xx：服务器错误
	xmlhttp.onreadystatechange=function() //xmlhttp.onreadystatechange=getResult; 当状态改变时执行getResult。
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
    //open方法，用于设置异步请求目标的URL,请求方法以及其他参数信息
    //其中第一个为请求方法，第二个为请求目标，第三个为是否为异步
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    //send方法，用于向服务器发送一个不包含 任何参数的请求
	xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>

jquery、vue、js中的Ajax对比

<script>
   function getData() {
            // fetch(地址，配置对象).then(处理数据函数).then(接收返回值函数)
            fetch('abc.txt', {
                method: 'get',
                // body:{}   使用post方式时，可以传递参数
            }).then(function (r) {
                // 数据的处理方式 json()  text()
                return r.text();
            }).then(function (res) {
                // 接收返回值，后续的操作
                console.log('请求成功：', res);
            });
        }



            // jQuery：请求地址，请求方式，发送的数据，接收返回值
            $.ajax({
                url: 'abc111.txt',  // 请求地址
                type: 'get', // 请求方式（类型）
                data: '', // 要发送的数据
                success(data) { // 请求成功时执行的函数，形参就是获取的数据
                    console.log('请求成功：', data);
                    // 改变页面操作可以写在这里
                },
                error(err) { // 请求出错时执行的函数，形参是错误信息
                    console.log('请求出错：', err);
                }
            });

            // 1.创建对象 XMLHttpRequest()
            var xhr = new XMLHttpRequest();
            // 2.连接服务器，配置参数，（请求方式，请求地址，同异步）
            xhr.open('get', 'abc.txt', true);
            // 3.发送数据
            xhr.send();  // 如果是读取本地文件，可以设置为空
            // 4.监听事件，接收返回的数据，改变页面
            xhr.onreadystatechange = function () {
                // 同时满步骤4和状态码为200时
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log('请求成功：', xhr.responseText);
                    // 这里可以改变页面内容了
                }
            }
/*
            Ajax：异步更新页面的技术，必须在http或者https网络网络协议下使用
            1.原生js实现：共4步
            2.jQuery：$.ajax(配置对象);
                常用参数：url, type, data, success, error
            3.fetch：fetch(配置).then(处理数据函数).then(接收返回值函数)

            JSON：属性名必须为双引号，不能有注释，最后1个键值对后面不能有逗号
            JSON.parse(JSON字符串)：把JSON字符串转换为js对象
            JSON.stringify(js对象)：把js对象转换为JSON字符串
         */
         </script>

11. jQuery

11.1 jQuery基础

11.1.1 配置jquery

//在下载了JQuery配置资源的情况下可以引用
<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
//在没下载但是联网的条件下
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

11.1.2 基本选择器

1.ID选择器   $("#id");
2.元素选择器   $("element")
3.类选择器    $(".class")
4.复合选择器   $("selector1,selector2,....,selectorN")
//此处的selector，可以为前三个任意一个。（选择多个）
5.通配符选择器 $("*")
//选择所有元素

11.1.3 层级选择器

<script>
1.先祖子孙选择器   $("ul li")等，用于给祖先元素匹配所有的后代元素
2.parent > child 选择器，使用该选择器只能选择父元素的直接子元素
//$("form>input") 选择form里面的input元素
3.pre+next 选择器，用于匹配同级元素（紧跟的一个）
//$("label+p") 选择label后面--紧跟的p标签--元素
4.pre ~ siblings 选择器，用于匹配pre之后所有的siblings元素（多个）
//$("div~p") 选择div后面的所有p标签元素
</script>

11.1.4 过滤选择器（含内容过滤）

过滤器	说明	示例
:first	匹配找到第一个元素，它跟选择器结合使用	$(“tr:first”)//匹配表格的第一行
:last	匹配找到最后个元素，跟选择器结合使用	$(tr:last)//匹配表格的最后一行
:even	匹配所有索引值为偶数的元素，从0开始算	$(“tr:even”)//匹配为偶数的行
:odd	匹配所有索引值为奇数的元素，从0开始算	$(“tr:odd”)//匹配为奇数的行
:eq(index)	匹配一个给定索引的值	$(“div:eq(1)”)//匹配第二个div元素
:gt(index)	匹配所有大于给定索引值的元素	$(“div:gt(0)”)//匹配第二个及以上的div元素
:lt(index)	匹配所有小于给定索引值的元素	$(“div:lt(2)”)//匹配第二个及以下的div元素
:header	匹配如h1,h2…之类的元素	$(":header")//匹配全部的标题元素
:not(selector)	去除所有与给定选择器匹配的元素	$(“input:not(:checker)”)//匹配没有被选中的input元素
:animated	匹配正在执行动画效果的元素	$(":animated")//匹配所有正在执行的动画
:contains(text)	匹配包含指定文本的元素	$(“li:contains(‘DOM’)”) //匹配含有DOM文本内容的li元素
:empty	匹配不包含子元素或者文本的空元素	$(“td:empty”) //匹配不包含子元素或者文本的单元格
:has(selector)	匹配含有选择器所匹配元素的元素	$(“td:has( p)”) //匹配含有<p>标签的单元格
:parent	匹配含有子元素或文本的元素	$(“td:parent”) //匹配含有子元素或者文本的单元格

11.1.5 表单对象的属性过滤器

过滤器	说明	示例
:checked	匹配所有被选中元素	$(“input:checked”)//匹配checked属性为checked的input元素
:disabled	匹配所有不可用元素	$(“input:disabled”)//匹配disabled属性为disabled的input元素
:enabled	匹配所有可用的元素	$(“input:enabled”)//匹配enabled属性为enabled的input元素
:selected	匹配所有选中的option元素	$(“input:selected”)//匹配enabled属性为selected的option元素

11.1.6 子元素选择器

选择器	说明	示例
:first-child	匹配所有给定元素的第一个子元素	$(“ul li:first-child”)//匹配ul元素中的第一个子元素li
:last-child	匹配所有给定元素的最后一个子元素	$(“ul li:last-child”)//匹配ul元素中的最后一个子元素li
:only-child	匹配元素中唯一的子元素	$(“ul li:only-child”)//匹配只有一个li元素的ul中的li
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子元素或奇偶元素，index从1开始，而不是从0开始	$(“ul li:first-child”)//匹配ul中索引值为偶数的li元素$(“ul li:nth-child(3)”)//匹配ul中第三个子元素

11.1.7 属性选择器

选择器	说明	示例
[attribute]	匹配包含给定属性的元素	$(“div[name]”)//匹配含有name属性的div元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$(“div[name=‘test’]”)//匹配name属性是test的div元素
[attribute!=value]	匹配所有含有指定的元素，但属性不等于特定值的元素	$(“div[name!=‘test’]”)//匹配name属性不是test的div元素
[attribute*=value]	匹配给定的属性是包含某些值的元素	$(“div[name*=‘test’]”)//匹配name属性中含有test的div元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素	$(“div[name^=‘test’]”)//匹配name属性中以test开始的div元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	$(" d i v [n a m e$ =‘test’]")//匹配name属性中以test结尾的div元素
[selector1]]…	符合属性选择器，需要同时满足很多个条件才使用	$(“div[id][name^=‘test’]”)//匹配具有id属性并且name属性是以test开头的div元素

11.1.8 表单选择器

选择器	说明	示例
:input	匹配所有的input元素	$(:input)//匹配所有的input元素 $(“form :input”)//匹配form标记中的所有input元素
:button	匹配所有的普通按钮	$(":button") //匹配所有的普通按钮
:checkbox	匹配所有的复选框	$(":checkbox") //匹配所有的复选框
:file	匹配所有的文件域	$(":file")//匹配所有的文件域
:hidden	匹配所有的不可见元素	$(":fhidden")//匹配所有的不可见元素
:image	匹配所有的图像域	$(":image")//匹配所有的图像域
:password	匹配所有的密码域	$(":password")//匹配所有的图像域
:radio	匹配所有的单选按钮	$(":radio")//匹配所有的单选按钮
:reset	匹配所有的重置按钮	$(":reset")//匹配所有的重置按钮
:submit	匹配所有的提交按钮	$(":submit")//匹配所有的提交按钮
:text	匹配所有的单行文本框	$("::text")//匹配所有的单行文本框

实例：注册页面中按钮可用监听&&改变指定字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>设置按钮是否可用</title>

<style type="text/css">
.odd{background:#cef;}		/*设置奇数行样式*/
.even{background:#ffc;}		/*设置偶数行样式*/
.light{background:#00A1DA;}	/*设置鼠标移到行的样式*/
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//功能一：包含指定字体的td都变红色
		$("td:contains('用户注册'),td:contains('确认密码')").css("color","red");
		//功能二：tr单双数样式，以及鼠标悬浮样式的改变
		$("tr:even").addClass("odd");
		$("tr:odd").addClass("even");
		$("tr").hover(
	  function() {$(this).addClass("light");},
	  function() {$(this).removeClass("light");}
		);
		//功能三：按钮的可用性监听
		$(":button").attr("disabled","disabled");
		$(":reset").attr("disabled","disabled");
		$(":text,:password").blur(function(){
			if($(":text").val()!="" || $(":password:eq(0)").val()!="" || $(":password:eq(1)").val()!=""){
				$(":reset").removeAttr("disabled");
			}else{
				$(":reset").attr("disabled","disabled");
			}
			
		});
	   	$(":text,:password").blur(function(){
			if($(":text").val()!="" && $(":password:eq(0)").val()!="" && $(":password:eq(1)").val()!=""){
				$(":button").removeAttr("disabled");
			}else{
				$(":button").attr("disabled","disabled");
			}
			
		});
	});
</script>
</head>
<body>
<table width="350" height="157"  border="0" align="center" cellpadding="0" cellspacing="1">
  <form name="form1">
	<tr>
      <td height="25" colspan="2" ><div align="center">用户注册</div></td>
    </tr>
    <tr>
      <td width="100" height="25" ><div align="right">用户昵称：</div></td>
      <td width="250" >&nbsp;<input type="text" name="username" size="25"></td>
	  
    </tr>
    <tr>
      <td height="25" ><div align="right">注册密码：</div></td>
      <td height="25" >&nbsp;<input type="password" name="pwd" size="25"></td>
	  
    </tr>
    <tr>
      <td height="25" ><div align="right">确认密码：</div></td>
      <td height="25" >&nbsp;<input type="password" name="pwd2" size="25"></td>
	  
    </tr>
    <tr>
      <td height="25" colspan="2" ><div align="center"><input type="button" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"></div></td>
    </tr>
  </form> 
</table>
</body>
</html>

效果图：
在这里插入图片描述

11.2 jQuery控制页面

11.2.1 对元素内容进行操作

<div>
    <span id="clock">当前时间：2021-5-9</span>
</div>
<script type="text/javascript">alert($("div").text())</script>//对文本内容进行操作
<script type="text/javascript">alert($("div").html())</script>//对HTML内容进行操作

注意事项：
First：#(“div”).text()修改内容会改动div元素所有内容（包括内部标签）
Second：当使用text()进行内容修改，不会解析HTML代码，html()才会。

11.2.2 对元素的值进行操作

方法	说明	示例
val()	获取第一个匹配元素的的当前值	$("#username").val() //获取id为username的元素的值
val(val)	用于设置所有匹配的值	$(“input:test”).val(“新值”)//为全部文本框设置值
val(arrVal)	用于为checkbox、select和radio等元素设置值	$(“select”).val([‘列表项1’，‘列表项2’])

案例（select的val）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>对元素值操作的实例</title>
<style>
body{
	font-size:12px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
		$("select").val(['列表项1','列表项2']);
		//设置多行列表框的值,把默认选择改变成1、2了。
		alert($("select").val());
		//获取并输出多行列表框的值
   });
</script>
</head>
<body background="bg.gif">
<select name="like" size="3" multiple="multiple" id="like">
  <option>列表项1</option>
  <option selected="selected">列表项2</option>
  <option selected="selected">列表项3</option>
</select>
</body>
</html>

11.3 对DOM节点进行操作（CRUD）

一、创建节点

创建新元素节点两个步骤：1.创建新元素，2.将新元素插入到父元素中
<script>
    $(document).ready(function()){
    //方法一
    var $p=$("<p></p>");
    $p.html("<span style='color:#FF0000'>方法一添加的内容</span>");
    $("body").append($p);
    //方法二
    var $txtP=$("<p><span style='color:#FF0000'>方法二添加的内容</span></p>");
    $("body").append($txtP);
    //方法三
    $("body").append("<p><span style='color:#FF0000'>方法三添加的内容</span></p>")
                      }
</script>

二、插入节点

在元素内部插入的方法

方法	说明	示例
append(content)	为所有匹配的元素的内容追加内容	$("#B").append("<p>A</p>");//向id为B的元素–添加–内容
appendTo(content)	将所有匹配的元素添加到另一个元素的元素集合中	$("#B").apppendTo("#A")//将id为B的元素追加到id为A的元素后面
prepend(content)	为所有匹配的元素的内容前置内容	$("#B").prepend("<p>A</p>")//将id为B的元素内容前添加一个段落
prependTo(content)	将所有匹配的元素前置到零一个元素集合中	$("#B").prependTo("#A")//将id为B的元素追加到id为A的元素前面

在元素外部插入的方法

方法	说明	示例
after(content)	在每个匹配的元素之后插入内容	$("#B").after("<p>A</p>");//向id为B的元素的后面添加一个段落
insertAfter(content)	将所有匹配的元素插入到另一个指定元素的元素集合的后面	$("<p>test</p>").insertAfter("#B");//将要添加的段落插入到id为B的元素的后面
before(content)	在每个匹配的元素之前插入内容	$("#B").before("<p>A</p>");//向id为B的元素的前面添加一个段落
insertBefore(content)	将所有匹配的元素插入到另一个指定元素的元素集合的前面	$("<p>test</p>").insertBefore("#B");//将要添加的段落插入到id为B的元素的前面

三、删除、复制、替换节点

删除节点有两种方法：1.empty()2.remove()
div1:
<div id="div1" style="border:1px solid #0000FF;height:26px">
    <span>1234354</span>
</div>
div2:
<div id="div2" style="border:1px solid #0000FF;height:26px">
    <span>1234354</span>
</div>
<script type="text/javascript">
    $("#div1").empty();//删除节点里面的内容
    $("#div2").remove();//删除div2中的所有东西
</script>

复制节点
<script type="text/javascript">
    $(function(){
        $("input").bind("click",function(){
            $(this).clone().insertAfter(this);
        })
    })
</script>

替换节点有两种方法：1.replaceWith()2.replaceAll()
<script type="text/javascript">
    $(document).ready(function){
        $("#div1").replaceWith("<div>replaceWith()方法替换的结果</div>");
        $("<div>replaceAll方法的替换结果</div>").repalceAll("#div2");
    }
</script>

11.4 对元素属性进行操作的方法

方法	说明	示例
attr(name)	获取匹配的第一个元素的属性值	$(“img”).attr(‘src’);//获取页面中第一个img元素的src属性的值
attr(key,value)	为所有匹配的元素设置一个属性值	$(“img”).attr(“title”,“sed”);//为图片添加一个标题属性，属性值是sed
attr(key,fn)	为所有匹配的元素设置一个函数返回值的属性值(fn代表函数)	$("#fn").attr(“value”,function(){return this.name//将元素名称作为其value值;});
attr(properties)	为所有匹配元素以集合形式同时设置多个属性	$(“img”).attr({src:“test.gif”,tiitle:“2432”})//为图片同时添加两个属性，分别是src和title
removeAttr(name)	为所有匹配的元素删除一个属性	$(“img”).removeAttr(“title”);//移除所有图片的title属性
prop()	获取/设置元素属性（类似attr()）	$(“img”).prop(“title”,“标题字”);//设置所有图片的title属性
removeProp(name)	删除属性（类似removeAttr(name)）	$(“img”).removeProp(“title”);//移除所有图片的title属性

attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr

11.5 对元素的CSS样式进行操作

一、通过修改CSS类实现

方法	说明	示例
addClass(class)	为所有匹配的元素添加指定的CSS类名	$(“div”).addClass(“blue line”);//为全部的div元素添加blue跟line两个css类
removeClass(class)	为所有匹配的元素删除指定的CSS类名	$(“div”).removeClass(“line”);//为全部的div元素删除line类
toggleClass(class)	如果存在就删除，如果不存在就添加css类	$(“div”).toggleClass(“yellow”);//当div元素有yellow的css类时，就删除，如果没有就添加
toggleClass(class,switch)	如果switch参数为true则添加，如果为flase则删除	$(“div”).toggleClass(“yellow”,true);//添加$(“div”).toggleClass(“yellow”,false);//删除

二、通过修改css属性实现

方法	说明	示例
css(name)	返回第一个匹配元素的样式属性	$(“div”).css(“color”);//获取第一个匹配的div元素的color属性值
css(name,value)	为所有匹配元素的指定样式设置值	$(“img”).css(“border”,“1px solid #000000”);//为全部img元素设置边框样式
css(properties)	以{属性：值，属性：值}的形式为所有匹配的元素设置样式属性	$(“tr”).css({“background-color”:“FFe5FF”,“font-size”:“14px”,“color”:"#FFFFFF"});

案例（改变头像）

Body:

首先得现在html页面中有显示界面的地方。
<body>

<table width="120px" height="120px" align="center" border="1" bordercolor="#00CCFF" cellspacing="0">
  <tr>
    <td>
<table align="center">
  <tr>
    <td>
		<select name="select" id="sex">
			<option value="">请选择性别</option>
			<option value="nan">男性</option>
			<option value="nv">女性</option>
		</select>
		<div id="o"></div><div id="n"></div>//设为空，但是即将显示在此上面
	</td>
  </tr>
</table>
	</td>
  </tr>
</table>
</body>

JS:

通过js来显示，如果select的地方为空则弹出请选择性别。如果不为空则判断选的是男还是女，然后清空id=o的地方，让其选择图像，然后在id=n的地方去判断id=one中的value值，将其显示在img里面。
<script type="text/javascript">
    $(document).ready(function(){
	$("select").change(function(){
		var value = $(this).val();
		if(value == ""){
			alert("请选择性别");	
		}else{
			if(value == "nan"){
				$("#o").empty();
				$("#o").append("<select id='one'><option value='pic/1.jpg'>头像1</option><option value='pic/2.jpg'>头像2</option><option value='pic/3.jpg'>头像3</option><option value='pic/4.jpg'>头像4</option><option value='pic/9.jpg'>头像5</option></select>");
				$("#n").empty();
				$("#n").append("<img src='pic/1.jpg'>");
				$("#one").change(function(){
					var va = $(this).val();
					$("#n").empty();
					$("#n").append("<img src="+va+">");
				});
			}else{
				$("#o").empty();
				$("#o").append("<select id='one'><option value='pic/5.jpg'>头像1</option><option value='pic/6.jpg'>头像2</option><option value='pic/7.jpg'>头像3</option><option value='pic/8.jpg'>头像4</option><option value='pic/10.jpg'>头像5</option></select>");
				$("#n").empty();
				$("#n").append("<img src='pic/5.jpg'>");
				$("#one").change(function(){
					var va = $(this).val();
					$("#n").empty();
					$("#n").append("<img src="+va+">");
				});
			}
		}
	});						   
});
</script>

11.3 JQuery事件处理

11.3.1 页面加载完成响应事件

1.$(document).ready(function(){//这里写代码});
2.$().ready(function(){//这里写代码});
3.$(function(){//这里写代码});

11.3.2 JQuery中的事件

方法	说明
blur()	触发元素的blur事件
blur(fn)	在每一个匹配元素的blur事件中绑定一个处理函数，在元素失去焦点时触发
change()	触发元素的change事件
change(fn)	在每一个匹配元素的change事件中绑定一个处理函数，在元素的值改变并失去焦点时触发
click()	触发元素的click事件
click(fn)	在每一个匹配元素的click事件中绑定一个处理函数，在元素上单击时触发
dblclick()	触发元素的dblclick事件
dblclick(fn)	在每一个匹配元素的dblclick事件中绑定一个处理函数，在元素上双击时触发
error()	触发元素的error事件
error(fn)	在每一个匹配元素的error事件中绑定一个处理函数，在JavaScript发生错误时触发
focus	触发元素的focus事件
focus(fn)	在每一个匹配元素的focus事件中绑定一个处理函数，在元素获得焦点时触发
keydown()	触发元素的keydown事件
keydown(fn)	在每一个匹配元素的keydown事件中绑定一个处理函数，当键盘按下时触发
keyup()	触发元素的keyup事件
keyup(fn)	在每一个匹配元素的keyup事件中绑定一个处理函数，当键盘释放时触发
keypress()	触发元素的keypress事件
keypress(fn)	在每一个匹配元素的keypress事件中绑定一个处理函数，当按下并抬起键盘时触发
load(fn)	在每一个匹配元素的load事件中绑定一个处理函数，匹配的元素内容完全加载完毕后触发
mousedown(fn)	在每一个匹配元素的mousedown事件中绑定一个处理函数，在元素上按下鼠标时触发
mousemove(fn)	在每一个匹配元素的mousemove事件中绑定一个处理函数，鼠标在元素上移动时触发
mouseout(fn)	在每一个匹配元素的mouseout事件中绑定一个处理函数，鼠标在元素上离开时触发
mouseover(fn)	在每一个匹配元素的mouseover事件中绑定一个处理函数，鼠标移入元素时触发
mouseup(fn)	在每一个匹配元素的mouseup事件中绑定一个处理函数，鼠标在元素上按下并松开时触发
resize(fn)	在每一个匹配元素的resize事件中绑定一个处理函数，当文档窗口改变大小时触发
scroll(fn)	在每一个匹配元素的scroll事件中绑定一个处理函数，当滚动条发生改变时触发
select()	触发元素的select事件
select(fn)	在每一个匹配元素的select事件中绑定一个处理函数，当在元素上选中某段文本时触发
submit()	触发元素的submit事件
submit(fn)	在每一个匹配元素的submit事件中绑定一个处理函数，在表单提交时触发
unload	在每一个匹配元素的unload事件中绑定一个处理函数，在元素卸载时触发

11.3.4 事件绑定

<script>
$("this").find(".menu");	//选择当前的类为menu的节点元素
$("input:button").bind("click".function(){alert('1');});	//为普通按钮绑定单击事件
$("input:button").unbind("click");	//为普通按钮解绑单击事件
$("input:button").unbind();	//解绑元素上所有的事件
$("div").one("click",dMethod()); //第一次单击div时执行dMethod方法
模拟用户操作：
trigger("click...",method()) 	//无需用户单击（模仿单击了），执行method。
hover(over,out)		//悬停执行over，移除out
</script>

实时验证用户输入信息（trigger）

Body：

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
<link href="index.css" type="text/css" rel="stylesheet" />
<title>验证用户注册信息</title>
</head>

<body>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<form name="form" method="post">
  <div class="title">用户注册</div>
  <div class="one">
    <label for="name">用户名：</label>
    <input type="text" id="name" name="name" class="a" />
    <strong class='red'>*</strong>
  </div>
  <div class="one">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" class="a" />
    <strong class='red'>*</strong>
  </div>
  <div class="one">
    <label for="passwords">确认密码：</label>
    <input type="password" id="passwords" name="passwords"  class="a"/>
    <strong class='red'>*</strong>
  </div>
  <div class="two">
    <input type="submit" id="send" value="注册" />
    <input type="reset" id="res" value="重置" />
  </div>
</form>
</body>
</html>

JS：

// JavaScript Document
$(document).ready(function(){
	//blur事件：焦点移开输入框时激活
	//blur事件执行的方法，一大坨
	$("form :input").blur(function(){
		$(this).parent().find("span").remove();
		if($(this).is("#name")){
			if(this.value==""){
		   		var show=$("<span class='error'>用户名不能为空</span>");
	   	   		$(this).parent().append(show);
			}else if(this.value.length<3){
		   		var show=$("<span class='error'>用户名不能小于3位</span>");
	   	   		$(this).parent().append(show);
			}else{
		   		var show=$("<span class='right'>正确</span>");
	   	   		$(this).parent().append(show);	
			}
		}
		if($(this).is("#password")){
			if(this.value==""){
		   		var show=$("<span class='error'>密码不能为空</span>");
	   	   		$(this).parent().append(show);
			}else if(this.value.length<6){
		   		var show=$("<span class='error'>密码不能小于6位</span>");
	   	   		$(this).parent().append(show);
			}else{
		   		var show=$("<span class='right'>正确</span>");
	   	   		$(this).parent().append(show);
			}
		}
		if($(this).is("#passwords")){
			if(this.value==""){
		   		var show=$("<span class='error'>确认密码不能为空</span>");
	   	   		$(this).parent().append(show);
			}else if(this.value!=$("#password").val()){
		   		var show=$("<span class='error'>两次密码不相等</span>");
	   	   		$(this).parent().append(show);
			}else{
		   		var show=$("<span class='right'>正确</span>");
	   	   		$(this).parent().append(show);
			}
		}
	});
	/*
	若点击注册按钮，输入框执行blur焦点事件
	*/
	$("#send").click(function(){
	   	$("form :input").trigger("blur");
		if($(".error").length){
		   	return false;	
		}else{
		   	alert("注册成功！");	
		}
	});
	$("#res").click(function(){
		$("span").remove();
	});
});

11.4 JQuery动画效果

11.4.1 显示和隐藏

鼠标移入的时候显示菜单，移出隐藏菜单
<script type="text/javascript">
    $(document).ready(function(){
        $("#box").hover(function(){
            $("#menu").show(300);
        },function(){
            $("#menu"),hide(300);
        });
    });
</script>

11.4.2 显示和隐藏淡入淡出动画效果

方法	说明	示例
fadeIn(speed,[callback])	通过增大不透明度显示匹配元素淡入的效果	$(“img”).fadeIn(300);//淡入效果
fadeOut(speend,[callback])	通过减小不透明度实现匹配元素淡出的效果	$(“img”).fadeOut(300);//淡出效果
fadeTo(speed,opacity,[callback])	将匹配元素的不透明度以渐进的方式调整到指定的参数	$(“img”).fadeTo(300,0.15);//在0.3秒内将图片调整到15%不透明度

11.4.3 滑动显示和隐藏文章内容

slideToggle()
slideDown()
slideUp()

<body background="bg.gif">
<style type="text/css">
.title{
font-size:16px;
cursor:pointer;//鼠标移上去会改变样式
    }
.content{
display:none;
font-size:14px;
width:500px;
line-height:30px;
margin-top:20px;}
</style>
<script src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".title").click(function(){
			if($(".content").is(":hidden")){
				$(".content").slideDown(500);
			}else{
				$(".content").slideUp(500);
			}
		});
	});
</script>
<div align="center" class="menubar">
	<div class="title">公司简介</div>
	<div align="left" class="content">
		&nbsp;&nbsp;&nbsp;&nbsp;吉林省晨*科技有限公司是一家以计算机软件技术为核心的高科技型企业。公司创建于1999年12月，是专业的应用软件开发商和服务提供商。多年来始终致力于行业管理软件开发、数字化出版物开发制作、行业电子商务网站开发等，先后成功开发了涉及生产、管理、物流、营销、服务等领域的多种企业管理应用软件和应用平台，目前已成为计算机出版行业的知名品牌。
	</div>
</div>
</body>

11.3.5 自定义动画效果

animate(params,speed,callback)
params:例如：{left:“200px”,top:“100px”}

在使用animate()方法时，必须设定元素的定位属性position:relative或absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>即将上线影片信息向上滚动效果</title>
<style type="text/css">   
*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
	color: #333333;
}
.list,li{
	margin:0;
}   
.scroll{
 	margin-left:10px;
  	margin-top:10px; 
  	width:270px; 
  	height:120px; <!-- 设置滚动的黑盒高度 -->
  	overflow:hidden;<!-- 设置滚动的黑盒隐藏 -->
}   
.scroll li{ 
	width:270px; 
	height:30px; 
	line-height:30px; 
	margin-left:26px;
}   
.scroll li a{
 	font-size:14px;
 	color:#333; 
 	text-decoration:none;
}   
.scroll li a:hover{
 	color:#66CCFF;
}  
</style>   
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>   
</head>

<body background="bg.gif">
<table width="270" border="0" cellpadding="0" cellspacing="0" style="margin-left:12px;">
	<tr><td align="left" height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div class="scroll">   
	<ul class="list">   
 		<li><a href="#">《荒野大镖客》重磅来袭</a></li>   
		<li><a href="#">《星球大战外传》科幻迷不容错过</a></li>   
		<li><a href="#">《野鹅敢死队》重现战场</a></li>  
		<li><a href="#">《九死一生》原始丛林探险</a></li>   
		<li><a href="#">《荒野猎人》莱昂纳多复仇与熊搏斗</a></li> 
	</ul>   
</div>
<script type="text/javascript"> 
$(document).ready(function(){
	$(".scroll").hover(function(){//鼠标指向滚动区域
		clearTimeout(timeID);//中止超时，即停止滚动
	},function(){//鼠标离开滚动区域
		timeID=setInterval('autoScroll()',3000);   //设置超时函数，每过3秒执行一次函数
	});
});
function autoScroll(){   
	$(".scroll").find(".list").animate({   //自定义动画效果
 		marginTop : "-25px"   //向上移动的距离
	},500,function(){   
		$(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this);   //把列表第一行内容移动到列表最后
	})   
}   
var timeID=setInterval('autoScroll()',2000);   //设置超时函数，每过2秒执行一次函数
</script> 
</body>
</html>

汤姆猫少年

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS|jQuery

confirm (输出的文本）弹出确认框获取活动对象var e=window.event 获取事件对象var obj =e.srcElement 获取发生事件元素用处：e.x 获取鼠标x值e.y 获取鼠标y值obj.style.background 改变事件元素背景 obj.value 获取事件元素值form表单属性必须有return，否则执行都为trueonsubmit =“return funcname()” 提交触发事件，若funcname返回true才可以提交.
复制链接

扫一扫