栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Java web学习day08.1 jQuery概念+选择器

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Java web学习day08.1 jQuery概念+选择器

JQuery

是Javascript和Query,是辅助Javascript开发的js类库
核心思想:write less,do more,所以实现了很多浏览器的兼容问题
好处:免费、开源,使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等功能





Insert title here
	
	



	



①使用jQuery一定要使用jQuery类库嘛?
必须
②jQuery中的$是什么?
一个函数
③怎么为按钮添加响应函数?
1.使用jQuery查询到标签对象
2.使用标签对象.click(function(){});

jQuery核心函数

$是jQuery的核心函数,能完成jQuery的很多功能。$()就是调用$这个函数

1.传入参数为[函数]
表示页面加载完成之后,相当于window.οnlοad=function(){}
2.传入参数为[HTML字符串]
会创建标签对象





Insert title here
	
	






3.传入参数为[选择器字符串]
类似于cs选择器
$("#id属性值"); // id选择器,根据id查询标签对象
$(“标签名”); //标签名选择器,根据指定的标签名查询标签对象
$(".class属性值");//类型选择器,可以根据class属性查询标签对象






Insert title here
	
	


     
     
     


4.传入参数为[DOM对象]
会把这个DOM对象转化为jQuery对象
DOM对象

jQuery对象





Insert title here
	
	


     
     
     


jQuery对象和dom对象区分

Dom对象

通过getElementById、getElementByName、getElementByTagName、createElement方法创建的对象
Dom对象alert出来的效果是:[object HTMLButtonElement]

jQuery对象

通过jQuery提供的API创建的对象、jQuery包装的Dom对象、jQuery提供的API查询到的对象
jQuery对象alert出来的效果是:[object Object]

jQuery对象的本质

是Dom对象数组+jQuery提供的一系列功能函数。





Insert title here




	
	
Atguigu is Very Good!



jQuery对象和Dom对象使用区别

Dom对象对象不能使用jQuery对象的属性和方法
jQuery对象对象不能使用Dom对象的属性和方法





Insert title here




	
	
Atguigu is Very Good!
Dom对象和jQuery对象的相互转换(重点)

1.Dom对象转化为jQuery对象
1>先有Dom对象
2>$(DOM对象)就可以转化成为jQuery对象

2.jQuery对象可以转化为Dom对象
1>先有jQuery对象
2>jQuery对象通过下标取出相应的Dom对象





Insert title here




	
	
Atguigu is Very Good!
jQuery选择器(重点) 基本选择器










p.myClass表示标签名必须是p标签,而且Class类型还要是myClass
结果和选择器的顺序无关,与页面的标签顺序有关。



	
		
		Untitled document
		
		
		
	
	
	
		
		
		
		
		
		
		
id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
//display:none的作用是让div不显示 //class的css是display:none
class为"hide"的div
包含input的type为"hidden"的div
^^span元素^^
层级选择器


①ancestor descendant 后代选择器

在给定的祖先元素下匹配所有的后代元素

②parents>child 子元素选择器

在给定的父元素下匹配所有的子元素

③parent+next 相邻元素选择器

匹配所有紧接在prev元素后的next元素

④prev~sibings 之后的兄弟元素选择器

匹配prev元素之后的所有siblings元素



	
		
		Untitled document
		
		
		
	
		
	

		
		
		
		
		

id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
^^span元素^^
过滤选择器 基本过滤选择器














	
		
		Untitled document
		
		
		
	
			

		
		
		
		
		
		
		
		
		
				
		
		
		

基本选择器.



id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的div元素.
内容过滤选择器




返回包含p的div

非空



	
		
		Untitled document
		
		
		
	
			
		
		
		
		
		
		

id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的div元素.
属性过滤器




!有两种情况:
①不含该属性
②含该属性,值不等








Untitled document





	
	
	
	
	
	
	
	

	

id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的div元素.
表单过滤器


匹配所有type=“”的input

表单对象属性

disabled=“disabled”



	
		
		Untitled document
		
		
	
	
		

表单对象属性过滤选择器







可用元素:
不可用元素:
可用元素:
不可用元素:

多选框:
test1 test2 test3 test4 test5

下拉列表1:
//多选下拉框,由multiple属性决定 多选按住ctrl 连选按住shift

下拉列表2:
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/293005.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号