Javaweb_JQuery

最新推荐文章于 2024-06-02 10:45:54 发布

Sharpen__

最新推荐文章于 2024-06-02 10:45:54 发布

阅读量110

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Sharpen__/article/details/108454493

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入探讨了JQuery的核心概念，包括其简化JavaScript开发的独特方式，如选择器、事件处理和DOM操作。详细介绍了JQuery的基本语法、常用方法及如何与DOM对象交互，同时还涵盖了JQuery在实际网页开发中的应用案例。

摘要由CSDN通过智能技术生成

JQuery就是js和查询（Query），就是辅助js开发的js类库。
核心思想：写得少，做得多。

function $(Xid){
 return document.getElementById(Nid);
}

有了这样的函数，以后直接$(“id名”)就可以获取响应的对象。

注意的问题：

1.使用JQuery要引入JQuery类库。
2.JQuery的$是一个函数
3.如何为按钮添加点击响应函数？
	1）.使用jQuery查询标签对象
	2）.使用标签对象.click(function(){});
对这样一段代码进行操作：
<p>one</p> 
<div> 
<p>two</p> 
</div> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a> 

书写：alert($("div>p").html()); 表示div块元素下的p标签的内容  也就是two
再如：
$("<div><p>Hello</p></div>").appendTo("body"); 
向body中添加一段子串

$(document).find("div>p").html()); 表示在全文寻找带p标签的div并显示p标签的html内容

这一块的代码可以进行转换：
$(document).ready(function(){ 
alert("Hello world!"); 
}); 
转换为：
$(function(){ 
alert("Hello world!"); 
});

$('div>ul')和$('div ul')的区别，
$('div>ul')是<div>的直接后代里找<ul>； 
而$('div ul')是在<div>的所有后代里找<ul>。

jQuery对象的几个方法，find() each()方法
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，而表达式中
的“#”表示HTML中的ID，如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。 

有点杂乱--------------
标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')

$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如： 
$("a").click(function(){...}) 
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>
			<!-- 引入js类库-->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//使用$()代替window.onload
	$(function(){
		//使用选择器获取按钮对象，随后绑定单击响应函数
		$("#btnId").click(function(){
			//弹出Hello
			alert('Hello');
		});
	});
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

$是 j Q u e r y 的核心函数，$ ()就是调用$这个函数。

1.传入参数为【函数】时：
表示页面加载完成后。window.onload=function(){}
2.传入参数为【HTML字符串】时：会对我们创建这个HTML标签对象
3.传入参数为【选择器字符串】时：
$("#id属性值")；id选择器，根据id查询标签对象
$("标签名")；标签名选择器，根据指定的标签名查询标签对象
$(".class属性值")；类型选择器，可以根据class属性查询标签对象
4.传入参数为【DOM对象】时：
会把这个dom对象转换为jQuery对象

什么是jQuery对象，什么是dom对象
Dom对象：

1.通过 getElementById()查询出来的标签对象是 Dom 对象 
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象 
4.通过 createElement() 方法创建的对象，是 Dom 对象

Dom对象Alert出来的效果是：【Object HTML 标签名 Element】。

JQuery对象

5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象 
6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象 
7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

JQuery对象Alert出来的效果是：【Object object】

JQuery对象的本质：dom对象的数组+JQuery提供的一系列功能函数。
JQuery对象与Dom对象使用的区别：两者不能相互使用对方的属性和方法。

设置样式：

<script type="text/javascript">
	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
	});
</script>
</head>
<body>
	<div id="testDiv">xxx is Very Good!</div>
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>

$(function(){
				$(".head").click(function(){
					$(".content").toggle();
				}).mouseover(function(){
					$(".content").toggle();
				}); 
				}
				//表示head类下的内容作为一个按键，按下时，content类的内容将会出现，再次按下会缩回。当鼠标移入该区域，content内容也会弹出，移除会收回内容。

层级选择器

ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素 
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素 
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

过滤选择器

: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) 匹配含有选择器所匹配的元素的元素

表单过滤器

: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

JQuery元素过滤

eq() 获取给定索引的元素 功能跟 :eq() 一样 
first() 获取第一个元素 功能跟 :first 一样 
last() 获取最后一个元素 功能跟 :last 一样 
filter(exp) 留下匹配的元素 
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true 
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样 
not(exp) 删除匹配选择器的元素 功能跟 :not 一样 
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样 
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样 
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样 
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素 
parent() 返回父元素 prev(exp) 返回当前元素的上一个兄弟元素 
prevAll() 返回当前元素前面所有的兄弟元素 
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素 
siblings(exp) 返回所有兄弟元素 a
dd() 把 add 匹配的选择器的元素添加到当前 jquery 对象中