jQuery框架-与js对象转换-选择器-DOM操作方法-事件-案例

 

1. 能够使用jQuery的基本选择器

2. 能够使用jQuery的层级选择器

3. 能够使用jQuery的过滤选择器

4. 能够使用jQuery的DOM操作的方法

5. 能够完成隔行换色

 

什么是jQuery

目标

1. 什么是jQuery

2. 它有什么作用

什么是JS框架

JS框架也是使用JavaScript语言编写的，框架本身提供了大量的新的方法，可以简化JS代码，提高开发效率。

为什么要使用框架开发

同一段JS代码在不同的浏览器上执行效果是有差异的

 

1. jQuery框架也是JS代码写出来的，就是一个JS文件

2. 由第三方厂商做出来的，免费开源。

3. 提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现

4. 程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。

jQuery框架特点：

1. 免费开源

2. 轻量级框架：占用资源少，运行速度快

3. 宗旨：write less do more

小结

jQuery开发有什么好处？

1. 提高开发效率

2. 免费开源

3. 减少开发工作量

 

jQuery的导入与使用

目标

在页面上使用jQuery框架

官网

http://www.jquery.com

 

版本的选择：企业中使用相对比较低版本，学习比较高的版本

 

1. 开发中使用标准版：代码可读性好，有注释，文件比较大

2. 在企业中部署使用压缩版，文件小

这两个版本在功能上是完全一样的

文档网站

https://www.jquery123.com/

 

案例：导入jQuery并测试是否成功

导入失败的情况

$(function())的作用

类似于window.onload

 

与window.onload的区别

 

小结

1. jQuery导入有哪两个步骤?

   1. 将jquery复制到js目录下

   2. 使用script标签导入jquery.js文件

2. $(function()) 相当于哪个事件?

   window.onload

 

 

jQuery对象与js对象之间的转换

 

JS对象与jQuery对象的区别

• JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById("id")

• jQuery对象：通过jQuery选择器选中元素，就是jQuery对象

为什么要转换

注：JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。

转换语法

操作	方法
将JS对象-->jQuery对象	$(JS对象)
将jQuery对象--> JS对象	JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象

JS与JQ转换的演示案例：

需求

页面上有一个文本框，文本框中有值：传智播客。分别使用JS和jQuery的方法得到文件框中的值。

效果

 

代码

    
    
    


JS对象与JQ对象的转换

小结

操作	方法
将JS对象-->jQuery对象	$(JS对象)
将jQuery对象--> JS对象	JQ对象[0] 或 JQ对象.get(0)

 

选择器：基本选择器

目标

基本选择器的使用

选择器的作用

如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。

jQuery常用的选择器有如下：

1. 基本选择器

2. 层级选择器

3. 过滤选择器

4. 表单过滤选择器

选择器的语法

注：所有的选择器外面都要使用$("")，如：ID选择器 $("#ID")

基本选择器	语法
ID选择器	#ID
类选择器	.类名
标签选择器	标签名

示例：基本选择器的使用

    
    
    
    






有一种奇迹叫坚持

    id为one



    id为two class是 mini
    
class是 mini



    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini



    div 动画


class为spanone的span元素
class为mini的span元素

小结

基本选择器	语法
ID选择器	#ID
类选择器	.类名
标签选择器	标签名

 

选择器：层级选择器

目标

层级选择器的使用

语法

注：省略了$("")

层级选择器	语法
获取A元素内部所有B元素，B是A的子孙元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三)	A+B
获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合)	A~B

演示案例

    
    
    
    







有一种奇迹叫坚持

    id为one



    id为two class是 mini
    
class是 mini



    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini


span

小结

层级选择器	语法
获取A元素内部所有B元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素	A+B
获取A元素后面所有同级B元素	A~B

 

选择器：过滤选择器

目标

基本过滤选择器的使用

什么是过滤选择器

在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法

语法

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
不包括指定内容的元素	:not()
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
等于第几个 equals	:eq()
大于第n个，不含第index个	:gt()
小于第n个，不含第index个	:lt()

 

演示案例

  
    
    
	
	
	
  
		 
		 
		 
		 
		 
		 
		 
		 
		

		

		

				
学生信息列表
				

					
学号
					
姓名
					
性别
					
年龄
					
家庭住址
					
成绩
				
				

					
1001
					
孙悟空
					
男
					
72
					
花果山
					
90
				
				

					
1002
					
猪八戒
					
男
					
36
					
高老庄
					
78
				
				

					
2002
					
沙僧
					
男
					
30
					
流沙河
					
67
				
				

					
3000
					
唐三藏
					
男
					
26
					
东土
					
87
				
				

					
4000
					
白骨精
					
女
					
18
					
白骨洞
					
96
				
				

					
5000
					
蜘蛛精
					
女
					
17
					
盘丝洞
					
95
				
				

					
总成绩
					
3045
				
		
		
		

	
	
	

小结

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
不包括指定内容的元素	:not()
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
等于第几个	:eq()
大于第n个，不含第index个	:gt()
小于第n个，不含第index个	:lt()

 

选择器：表单过滤选择器

目标

属性过滤选择器

语法

• 注：表单过滤选择器用于表单中元素

表单属性选择器	语法
可用	:enabled
不可用	:disabled
选中（单选radio ，多选checkbox）	:checked
选择（下列列表中的）	:selected

示例

	
		
		
		
		
	

	
		
		
		
		
		



		
		
		
		

		


		美容
		IT
		金融
		管理

		



		男
		女

		


        
		
			程序员
            中级程序员
            高级程序员
            系统分析师
		
		
			本科
			博士
			硕士
			大专
		

	

	

小结

表单属性选择器	语法
选中（单选radio ，多选checkbox）	:checked
选择（下列列表 中的）	:selected

 

DOM操作的方法：html()，text()，val()

目标

在JQ中如何操作innerHTML、innerText、value属性

jQuery的DOM操作方法

操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)

语法

html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值   val()获取值

演示案例

需求

获取"张三"，获得"标题标签"的文本，获得mydiv的标签体内容

效果

 

代码

    
    
    













标题标签

小结

操作方法	功能
html()	类似于innerHTML
text()	类似于innerText
val()	相当于实现value的功能

 

DOM操作的方法：与属性有关的方法

目标

学习attr()、removeAttr()、prop()、removeProp()方法的使用

语法

attr() 修改，添加或获取元素的属性。
	attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
	prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
	jq对象.removeAttr("src")
	jq对象.removeProp("href")

什么时候使用attr()和prop()

如果属性值是true或false，建议使用prop()，编程更加方便

 

代码

    
    
    










    
北京
    
天津

爱好：游泳

小结

方法名	功能描述
attr()	操作属性
prop()	操作布尔类型值的属性
removeAttr() /removeProp()	删除属性名和值

 

DOM操作的方法：与样式有关的方法

目标

学习与样式和类有关的方法

回顾

在JS中操作CSS的方法：

元素.style.样式名=样式值

元素.className=类名

与类名有关的方法

addClass("类名") 添加一个类样式，与CSS中第二种写法功能相同，如：addClass("一个或多个类名")
removeClass("类名") 移除一个类样式，让类样式不起作用
toggleClass("类名") 切换类样式，如果有这个class名就移除，如果没有就添加

与样式有关的方法

类似于css中方式一，修改行内样式

 

示例

  
    
    
	
	
	
	 
	
		 
		 
		 
		 
		 
 		 
		 

		
		 
有一种奇迹叫坚持
		 
自信源于努力
		 
	     

	    	 id为one 
		 
		
	
	
	
   

小结

方法名	功能
addClass(类样式名)	添加类样式
removeClass(类样式名)	移除类样式
toggleClass(类样式名)	上面2个方法的切换
css(样式名)	获取指定样式值
css(样式名,样式值)	设置指定的样式

 

DOM操作的方法：元素的创建和添加

目标

使用JQ对象的方法创建和插入元素

回顾

• JS中创建元素：createElement()

• JS添加到DOM树：appendChild()

语法

$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系

演示代码

    
    
    











    
北京
    
天津
    
重庆



    
反恐
    
星际

 

小结

方法名	描述
$(标签的全部内容)	创建一个元素
父元素.append(子元素)	追加成最后一个子元素
父元素.prepend(子元素)	追加成第一个子元素
元素.before(元素)	添加到当前元素的前面
元素.after(元素)	添加到当前元素的后面

 

回顾

JQ对象与JS对象转换

JS->JQ： $(JS对象)
JQ->JS： JQ对象[0] 或 JQ对象.get(0)

选择器

基本选择器

#ID
.类名
标签名

层级选择器

A B 
A>B 
A+B
A~B

过滤选择器

:first
:last
:not()
:even
:odd
:eq()
:gt()
:lt()

表单过滤选择器

:enabled
:disabled
:checked
:selected

DOM的操作方法

修改元素的内容

html() -> innerHTML
text() -> innerText
val()  -> value

属性有关的方法

attr()
prop() 用于布尔类型属性值
removeAttr() removeProp() 删除属性

样式有关的方法

addClass()
removeClass()
toggleClass() 切换类
css() 修改行内样式

元素创建和添加

$("元素的所有内容")
append() 添加到最后一个子元素
appendTo()  子元素追加到父元素中
prepend() 添加到第一个子元素
prependTo() 子元素追加到父元素中
before() 添加到当前元素的前面
after() 添加到当前元素的后面
clone() 当前元素克隆

 

DOM操作方法：删除元素

目标

与删除元素有关的方法

语法

元素.remove()  删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在

 

示例

  
    
    
	
	
	 
	
	   
       
	   

		 

		 	 
北京
			 
天津
			 
重庆
		 
	
	
	
   

 

小结

方法名	功能
元素.remove()	删除自己
父元素.empty()	清空子元素

 

jQuery的事件的使用

目标

1. 一个元素同时使用多个事件

2. 多个事件的链式写法

事件处理函数的命名

所有的事件处理函数前面都没有on

jQuery中常用的事件

事件方法	功能
blur()	失去焦点
change()	改变事件
click()	单击事件
dblclick()	双击事件
focus()	得到焦点
keydown()	键盘按下
keyup()	松开键盘
mouseover()	鼠标移上
mouseout()	鼠标移出
submit()	表单提交

 

事件方法使用示例

需求

1. 文本框得到焦点和失去焦点分别显示不同的背景色

2. 松开按键，将字母转成大写，再显示在文本框中

3. 使用链式写法实现相同的功能

效果

 

代码

    
    
    
    


用户名：

小结

事件方法	功能
blur()	失去焦点
focus()	得到焦点
keyup()	松开键盘

 

案例：表格隔行换色与全选全不选

目标

1. 实现隔行变色的效果

2. 实现全选全不选的效果

效果

 

步骤

隔行变色

1. 页面加载完毕，得到所有的tr。

2. 使用基本过滤选择器，除了第0行，设置偶数行背景色为lightgreen

3. 使用基本过滤选择器，除了第0行，设置奇数行背景色为lightyellow

全选全不选

1. 给最上面的id=all的复选框添加点击事件

2. 使用属性选择器选中所有item=name的复选框，设置它的checked属性与id=all的复选框的checked属性相同。

代码

    
    
    
    
    



    

        

        
分类ID
        
分类名称
        
分类描述
        
操作
    
    

        

        
1
        
手机数码
        
手机数码类商品
        
修改|删除
    
    

        

        
2
        
电脑办公
        
电脑办公类商品
        
修改|删除
    
    

        

        
3
        
鞋靴箱包
        
鞋靴箱包类商品
        
修改|删除
    
    

        

        
4
        
家居饰品
        
家居饰品类商品
        
修改|删除
    

小结

1. 选中大于0的tr的偶数行的选择器怎么写？

   tr:gt(0):even

    

2. 设置某个复选框选中的方法是什么？

   jq对象.prop("checked",true)

    

 

案例：实现购物车

目标

使用今天学习的内容制作一个购物车案例

需求

1. 实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，则添加成功一行，清空文本框的内容，图片使用固定一张。

2. 实现删除一行商品的功能，删除前弹出确认对话框。

效果

 

代码

    
    
    
    
    




    

        

        

            

                图片
            
            

                商品名
            
            

                操作
            
        
        

            

            

                三星Note7
            
            

                
                
            
        
        
    
    

    商品名：
     
    

小结

1. 创建tr
2. 添加到tbody中
3. 删除元素remove()
4. 获取父元素：parent()

 

总结

• JS与JQ对象的转换

操作	方法
将JS对象-->jQuery对象	$(JS)
将jQuery对象--> JS对象	JQ对象[0] 或 JQ对象.get(0)

 

• 能够使用jQuery的基本选择器

基本选择器	语法
ID选择器	#ID
类选择器	.类名
标签选择器	标签名

• 能够使用jQuery的层级选择器

层级选择器	语法
获取A元素内部所有B元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素	A+B
获取A元素后面所有同级B元素	A~B

• 能够使用jQuery的DOM操作的方法

jQuery中的方法	作用
html()	相当于innerHTML
text()	相当于innerText
val()	相当于value
attr()	操作属性
prop()	操作属性，布尔类型的值
addClass()	添加类样式
removeClass()	删除类样式
$(标签全部内容)	创建一个元素
append()	追加到最后一个子元素
before()	添加到当前元素的前面
after()	添加到当前元素的后面
remove()	删除自己