Javaweb开发了解前端知识三、Jquery(一)

news/2024/7/10 22:54:23 标签: DOM, Jquery

1JQuery 的初体验!!!

2Jquery 核心函数  $()

3JQuery对象和dom对象区分

3.1、什么是jquery对象,什么是dom对象

3.2、问题:JQuery对象的本质是什么?

3.3Jquery对象和Dom对象使用区别

3.4Dom对象和Jquery对象互转

4jQuery选择器

4.1、基本选择器

4.2、层级选择器

4.3、过滤选择器

5JQuery 元素筛选

什么是JQuery ?

jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

 

JQuery核心思想!!!

它的核心思想write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

 

JQuery流行程度

jQuery现在已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

 

JQuery好处!!!

jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

使用之前先要引入jquery-1.7.2.js,下面给出了资源

1JQuery 的初体验!!!

需求:使用JQuery给一个按钮绑定单击事件?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 	window.onload = function(){
// 		var btnObj = document.getElementById("btnId");
// 		btnObj.onclick = function(){
// 			alert("这是原生的js的单击事件");
// 		}
// 	}
	// 测试jquery是否引入成功
// 	alert($);
	$(function(){
		// 1 查找标签对象
		var $btnObj = $("#btnId");			// 表示根据id属性值,查找标签对象
		// 2 通过标签对象绑定单击事件
		$btnObj.click( function(){
			alert("这是jquery的单击事件");
		} );
	});
</script>
</head>
<body>

常见问题?

1、使用jquery一定要引入jquery库吗? 答案: 是,必须先引入

2、jquery中的$到底是什么? 答案: 是一个函数, 核心函数

3、怎么为按钮添加点击响应函数的? 答案:

1、先是页面加载完成之后

2、查找标签对象

3、通过标签对象.click(function(){})

2Jquery 核心函数  $()

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

1、传入参数为  [ 函数 ] 时:$(function(){})

$( function(){} ) 功能 相当  js 原生的页面加载完成之后。 window.οnlοad=function(){}

2、传入参数为  [ HTML 字符串 ] 时: $("<span>12</span>");

 $("<span>12</span>");相当于创建一个标签对象<span>12</span>.

var spanObj = document.createElement(span);//<span></span>.

spanObj.innerHTML = “12” 

3、传入参数为  [ 选择器字符串 ] 时:$(#id)

$(“#id属性值”); 相当于通过id属性查找标签对象

$(“标签名”); 相当于通过标签名查找标签对象 (返回集合)

$(“.class属性值”); 相当于通过class属性查找标签对象 (返回集合) 

4、传入参数为  [ DOM对象 ] 时: $(this) 

var jquery对象 = $( dom对象 );

3JQuery对象和dom对象区分

3.1、什么是jquery对象,什么是dom对象

Dom对象

1.通过getElementById()查询出来的标签对象是Dom对象

2.通过getElementsByName()查询出来的标签对象是Dom对象

3.通过getElementsByTagName()查询出来的标签对象是Dom对象

4.通过createElement() 方法创建的对象,是Dom对象

JQuery对象

5.通过JQuery提供的API创建的对象,是JQuery对象

6.通过JQuery包装的Dom对象,也是JQuery对象

7.通过JQuery提供的API查询到的对象,是JQuery对象

3.2、问题:JQuery对象的本质是什么?

jquery对象本质上是一个Dom对象数组加一系列的jquery的功能函数function

3.3Jquery对象和Dom对象使用区别

 jquery对象和dom对象的方法也不能互用。

 jquery对象和dom对象的属性不能互用。

3.4Dom对象和Jquery对象互转

1dom对象转化为jquery对象

var dom对象;

var jquery对象 = $( dom对象 );

2jquery对象转为dom对象

var $jquery对象;

$jquery对象[下标]


4jQuery选择器

4.1、基本选择器


#ID 选择器:根据id查找标签对象  

.class 选择器:根据class查找标签对象

element 选择器:根据标签名查找标签对象

* 选择器:表示任意的,所有的元素

selector1selector2 组合选择器:合并选择器1,选择器2的结果并返回

 

p.myClass

表示查找的标签名必须是p标签,并且class属性要是myclass

4.2、层级选择器


ancestor descendant后代选择器在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器:在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

4.3、过滤选择器

基本过滤器:


:first获取第一个元素

:last获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素,从 0 开始计数

:odd 匹配所有索引值为奇数的元素,从 0 开始计数

:eq(index)匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:header 匹配如 h1, h2, h3之类的标题元素

:animated 匹配所有正在执行动画效果的元素

内容过滤器:


:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has(selector)    匹配含有选择器所匹配的元素的元素

属性过滤器:


[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。

[attribute^=value]  匹配给定的属性是以某些值开始的元素

[attribute$=value]  匹配给定的属性是以某些值结尾的元素

[attribute*=value]  匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。

表单过滤器:


:input 匹配所有 input, textarea, select button 元素

:text匹配所有 文本输入框

:password匹配所有的密码输入框

:radio匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有提交按钮

:image 匹配所有img标签

:reset 匹配所有重置按钮

:button 匹配所有input type=button <button>按钮

:file 匹配所有input type=file文件上传

:hidden 匹配所有不可见元素display:none input type=hidden

表单对象属性过滤器:


:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked匹配所有选中的单选,复选,和下拉列表中选中的option标签对象

:selected匹配所有选中的option

5JQuery 元素筛选



jquery-1.7.2.js:https://download.csdn.net/download/mxcsdn/10450986

Javaweb开发了解前端知识二、JavaScript




http://www.niftyadmin.cn/n/626078.html

相关文章

四阶段--day13--Redis缓存入门/Redis常用数据类型

目录 一 Redis简介 1 背景描述 2 Redis 概述 3 版本及参考说明 二 Redis初始操作 1 启动redis服务 ​ 1.1 docker 中查看redis 服务 1.2 查看启动的redis进程信息 ​ 2 进入redis容器 3 登陆redis服务 3.1 登陆本地redis ​3.2 登陆远程redis 4 查看redis信息 …

Javaweb开发了解前端知识四、Jquery(二)

1、JQuery 的属性操作 JQuery属性操作html() 它可以设置和获取起始标签和结束标签中的内容 功能跟innerHTML一样 text() 它可以设置和获取起始标签和结束标签中的文本 功能跟innerText一样 val() 它可以设置/和获取表单项的value属性值。 val方法&#xff0c;还可以同时设置表单…

Javaweb开发了解前端知识五、xml文档与dom4j解析技术

1、xml 1. 文档声明 2. xml属性 3. 元素&#xff08;标签&#xff09; 5. 文本区域&#xff08;CDATA区&#xff09;xml是可扩展的标记性语言。1. 文档声明<?xml version"1.0" encoding"UTF-8"?> xml声明。 <!-- xml声明 version是版本的意思 …

四阶段--day14--Java中操作redis实践

本章节主要对Java中操作redis数据库的方式及API应用进行了分析和实践&#xff0c;具体方法的理解可以在实践中基于结果进行分析&#xff0c;逐步进行强化记忆。 一 创建工程,添加依赖 1 工程结构 创建maven父工程&#xff0c;例如03-jt-redis,删除父工程的src包,并在此工程下…

Javaweb开发了解前端知识六、Tomcat

1.JavaWeb的概念&#xff0c;什么是JavaWeb2.Web资源的分类3.常用的Web服务器4.Tomcat服务器和Servlet版本的对应关系5.Tomcat的使用6.Tomcat与Eclipse整合7.Eclipse创建动态的web工程8.Tomcat在Eclipse中副本的位置修改1.JavaWeb的概念&#xff0c;什么是JavaWebJavaWeb指的是…

四阶段--拓展练习--Java中本地缓存实现

本章节为基础拓展章节,重点是通过本地缓存的设计,加强Java中一些基础点的理解,同时在Java缓存设计上做一个拔高. 1 为什么要Cache(缓存)? 降低数据库的访问压力提高查询的性能,改善以后体验 2 我们都了解哪些Cache? 浏览器缓存数据持久层的Cache(MyBatis 中的Cache设计)逻…

Javaweb开发了解前端知识七、Servlet(一)

1.Servlet技术2.Servlet类的继承体系3.ServletConfig类4.ServletContext类1.Servlet技术 a) 什么是ServletServlet是javaWeb的三大组件。Servlet程序&#xff0c;Listener监听器。Filter过滤器。Servlet程序主要是运行在Tomcat服务器上。Servlet程序的作用&#xff1a;接收客户…

四阶段--day15--将springBoot项目部署到docker入门实例

1 每个工程都要添加打包的依赖 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.3.2.RELEASE</version><configuration><…