jQuery选择器基础入门教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器基础入门教程相关的知识，希望对你有一定的参考价值。
参考技术A 本文实例讲述了jQuery选择器用法。分享给大家供大家参考，具体如下：什么是jQuery选择器
使用javascript操作页面上得DOM元素时，首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。
在jQuery中则完全不同，jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象，并且将对象以jquery对象的形式返回。
首先来看看什么是选择器。
//根据id获取jQuery对象
var
jQueryObject=$("#testDiv");
上例中使用了id选择器，选取id为testDiv的DOM对象并将它放入jQuery对象，最后返回了一个jQuery对象。
现在通过jQueryObject变量就可以操作testDiv图层了，因为jQueryObject是一个jQuery对象，所以可以使用所有的jQuery对象方法。比如修改图层中的html内容：
jQueryObject.html("修改后的HTML内容");
通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。
jQuery选择器的强大在于提供了丰富的选择器，如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。
jQuery选择器核心函数
jQuery选择器调用的是jQuery核心函数：
jQuery(EXPRESSION,[econtext]);
这个函数接收一个包含选择器表达式的字符串，然后用这个字符串去匹配一组元素。
jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数，或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式（通常由CSS选择器组成），然后根据这个表达式查找所有匹配的元素。
默认情况下，如果没有指定context参数，$()将在当前的HTML
document中查找DOM元素：如果指定了context参数，如一个dom元素集jQuery对象，则会在这个context中查找。在jQuery1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。
参数说明如下：
~Expression：必选参数，选择器表达式。
~Context：可选参数，选择器上下文
~jQuery，选择器返回的jQuery对象，jQuery对象，jQuery对象是一个集合，可以使用链式语法调用各种jQuery函数。
Context参数能够缩小选择器的范围，加快查找速度。
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》
希望本文所述对大家jquery程序设计有所帮助。
JQuery基础（一篇入门）
1.Jquery的历史和特点简介
1.1Jquery的历史
1.2005年8月，John Resig提议改进Prototype的“Behaviour”库
2.2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互
3.2007年7月，jQuery 1.1.3版发布
4.2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提
5.2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle
6.2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布
友情提示：
JQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9
1.2Jquery的特点
1.快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2.提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3.创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用 AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
4.提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
5.增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
6.更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式
2.使用
2.1从 jquery.com 下载 jQuery 库
官网：http://jquery.com/download/
1.首先是下载相关的资源
2.加入到项目中
3.在页面上引入jqeury.js文件：
4.在页面的相应位置上开始使用
2.2 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（不推荐使用）
1.Google CDN:内容分发网络：联网加载jquery.js
最新版本（放心 Copy）：https://code.jquery.com/jquery-3.5.1.min.js
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
CDN:好处：不用再把jquery.js文件放在本地，减少了本地资源的消耗，同时也可以减少当前服务器本身的网络请求的压力（相当于是将网络请求转到了不同的CDN结点（不同城市的服务器））
缺点：如果因为网络原因，导致CDN结点中断，那么我们的项目中的页面上的功能就要失效了
3.Jquery基本语法
3.1.jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
3.1.1.元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("这是元素选择器")
$('p').hide()
}
</script>
</head>
<body>
<p>Hello World:Jquery</p>
<input type="button" value="元素选择器" onclick="elementSelector()" />
</body>
</html>
小结：1）jquery是以$开头的
2）hide():隐藏HTML中的元素
3）jquery代码可以和js代码混合使用
3.1.2.id 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("这是id选择器")
$('#p1').hide()
}
</script>
</head>
<body>
<p id="p1">Hello World:Jquery</p>
<input type="button" value="id选择器" onclick="elementSelector()" />
</body>
</html>
3.1.3.class 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("class选择器")
$('.pp').hide()
}
</script>
</head>
<body>
<p class="pp">Hello World:Jquery</p>
<input type="button" value="class选择器" onclick="elementSelector()" />
</body>
</html>
3.2.jQuery 事件方法
3.2.1.dblclick()
dblclick()：当鼠标双击元素时，会发生 dblclick 事件
例如：
$("#p1").dblclick(function(){
alert("再见，您的鼠标双击了该段落。");
});
3.2.2.mouseenter() mousedown() mouseup()
mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件
例如：
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
例如：
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件
例如：
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
3.2.3.hover()
hover()方法用于模拟光标悬停事件。
$("img").hover(
function(){//相当于mouseenter
console.log("你进入了 p1!");
},
function(){//相当于mouseleave
console.log("拜拜! 现在你离开了 p1!");
}
)
// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
// 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
3.3.jquery特效
3.3.1.隐藏和显示
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dblclick</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function hiddenEle(){
var box=$("#box");
box.hide();
}
function showEle(){
var box=$("#box");
box.show();
}
</script>
</head>
<body >
<div id="box" >
<p>上海滩</p>
<p>大上海。。。。百乐门。。。。</p>
</div>
<input type="button" id="btn" value="隐藏" onclick="hiddenEle()" />
<input type="button" id="btn" value="显示" onclick="showEle()" />
</body>
</html>
3.3.2.淡入淡出
淡入：fadeIn()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
淡出：fadeOut()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击淡入/淡出</title>
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" st以上是关于jQuery选择器基础入门教程的主要内容，如果未能解决你的问题，请参考以下文章