jQuery 学习笔记
文章目录
- 简介
- 安装jQuery
- 下载
- CDN
- jQuery 语法
- 基础语法是：$(selector).action()
- window.onload和$(document).ready()
- jQuery 选择器
- jQuery 元素选择器
- jQuery 属性选择器
- jQuery CSS选择器
- jQuery 事件
- $名称冲突
- jQuery 效果
- 隐藏/显示
- hide()和show()
- toggle()
- 淡入淡出
- 滑动
- 比较显示/隐藏、fading、滑动
- 动画
- animate()语法
- 操作多个属性
- 使用相对值
- 使用预定义的值
- 动画队列功能
- 不同选择内容
- stop()
- Channing
- jQuery HTML
- 获取和设置内容
- 获取和设置属性
- 添加新的HTML内容
- 添加单个
- 添加若干个
- 删除
- CSS 类
- 尺寸
- 遍历
- 祖先（向上遍历）
- parent()
- parents()
- parentsUntil()
- 后代（向下遍历）
- children()
- find(params)
- 兄弟（水平遍历）
- 过滤
- 参考：
简介
安装jQuery
下载
官网 jquery.com
CDN
百度
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
新浪
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
jQuery 语法
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
window.onload和$(document).ready()
由于脚本由上到下解释，如果script在元素前面，则需要使用onload或者ready，告诉引擎在页面加载完成后才运行script内容。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
原生JavaScript：
<script type="text/javascript">
window.onload = function() {
var vanish = document.getElementsByTagName("p");
var oBtn = document.getElementsByTagName("button");
oBtn[0].onclick = function() {
var length = vanish.length;
for (var i = 0; i < length; ++ i) {
vanish[i].innerHTML = "";
}
}
}
</script>
使用jQuery（更加方便简洁）：
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p, h2").hide();
});
});
</script>
这里的body：
<h2 class="test">This is a headingh2>
<p class="test">This is a paragraph.p>
<p>This is another paragraph.p>
<button id="f" type="button">Click mebutton>
注意： 如果没有使用onload或者ready，会使得script执行过早，出现操作错误。
test3.html:19 Uncaught TypeError: Cannot set property 'onclick' of undefined
at test3.html:19
补充：
jQuery入口函数：
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript入口函数：
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有
标签(DOM)都加载之后，就会去执行。 - JavaScript 的 window.onload 事件是等到
所有内容，包括外部图片之类的文件加载完后，才会执行。
jQuery 选择器
jQuery 元素选择器
jQuery 使用CSS 选择器来选取 HTML 元素。
$(“p”) 选取
元素。
$(“p.intro”) 选取所有 class=“intro” 的
元素。
$(“p#demo”) 选取所有 id=“demo” 的
元素。
jQuery 属性选择器
jQuery 使用XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。
jQuery CSS选择器
使用原生JavaScript改变内联样式：
var temp = document.getElementsByTagName('p');
temp[0].style.cssText = "background: red;";
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color", "red");
注意： 属性名可加""可不加，要使用驼峰法如下：
$("p").css(bakcgroundColor, "red");
jQuery 事件
$名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});
$.noConflict();
var sb = jQuery.noConflict();
sb(document).ready(function() {
// $("button").click(function() {
// $("p, h2").hide();
// });
sb("button")[0].onclick = function() {
sb("p").css("color", "red");
var temp = document.getElementsByTagName('p');
temp[0].style.cssText = "background: red;";
sb("p:not(.test)").css("color", "blue");
}
});
jQuery 效果
隐藏/显示
hide()和show()
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。(注意加"")
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
例子
对于body：
<h3>中国h3>
<button class="show">显示button>
<div class="outer">
<button class="hide">隐藏button>
<p>联系人： 张先生 <br />
北三环中路100号 <br />
北京p>
div>
<h3>美国h3>
<div class="outer">
<button class="hide">隐藏button>
<p>联系人： 张先生 <br />
北三环中路100号 <br />
北京p>
div>
script：
$(document).ready(function() {
$("button.hide").click(function() {
$(this).parent(".outer").hide(1000, showB());
});
});
function showB() {
$("button.show").click(function(){
$("button.show+div").show(1000);
});
}
可以看出，要实现显示隐藏之后的元素，隐藏已显示的元素，只靠hide()和show()十分的不方便。
于是就有了toggle().
toggle()
来回切换hide()和show()，通过一个按钮，显示被隐藏的元素，隐藏已显示的元素。
$("button").click(function(){
$("p").toggle();
});
语法：
$(selector).toggle(speed,callback);
淡入淡出
- fadeIn() 显示被隐藏的元素（display: none）
- fadeOut()
- fadeToggle()
- fadeTo()
语法：
$(selector).fadeIn/Out/Toggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
hide和show其实是对display进行设置，fading方法中的in和out和hide/show可以混用。
不过 某些效果不一样。
滑动
- slideDown()
- slideUp()
- slideToggle()
比较显示/隐藏、fading、滑动
toggle():
fadeToggle():
slideToggle():
动画
animate()语法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
例子
$("button").click(function(){
$("div").animate({left:'250px'});
});
注意属性名字使用驼峰命名法，属性值用""括起来。如：marginTop: ‘100px’。
操作多个属性
操作多个属性可用逗号分开：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
使用相对值
可以定义相对当前元素的值：
$(document).ready(function() {
$("button").click(function() {
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
});
});
使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
动画队列功能
对同一个选择内容进行前后顺序的动画。
写多个animate()调用，jQuery会创建包含这些调用的“内部”队列，逐一运行，有先后顺序。
$(document).ready(function() {
$("button").click(function() {
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
});
});
如上为：先向右平移300px，然后字体变大20px。
可先把选择器赋值到变量，便于操作：
var pp = $("p");
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
不同选择内容
如果对不同的选择内容添加多个动画animate()，则他们是同时进行的，而不是依次进行。
stop()
语法：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，不带参数时，stop() 会清除在被选元素上指定的当前动画，意思是：清楚当前动画队列上的第一个动画。
注意动画队列的概念思想
Channing
jQuery允许在一条语句把多个方法链接起来（在相同元素上）。
做法：直接连在后面添加即可，执行有先后顺序。
例子：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery HTML
获取和设置内容
- text() - 设置或返回所选元素的
文本内容 - html() - 设置或返回所选元素的
内容（包括 HTML 标记） - val() - 设置或返回
表单字段的值
无参数时返回相应的值，有参数时设置内容：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
获取和设置属性
- attr()
获取属性值：
$("#test1").attr("href")
设置属性值：
$("#test1").attr("href", "https://shaohuahua.top")
设置多个属性值：
$("#test1").attr({
"href": "https://shaohuahua.top",
"title": "test"
});
注意： animate()和css()中的属性名用""括起来时使用的是样式表中的名字，如果不用""，则用驼峰法命名。attr()中的属性名必须用""括起来。
添加新的HTML内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
添加单个
例子：
$("p").prepend("Some prepended text.");
$("ol").prepend("Prepended item ");
$("p").prepend("Prepended text. ");
其他三种方法相类似，这里都是使用text/HTML的方式创建新元素。""内的内容相当于直接写在HTML中
添加若干个
实际上，这四种方法可以通过参数接收无限数量的新元素。新元素可以通过
- text/HTML
- jQuery
- JavaScript/DOM
三种方式创建。
例子：
function appendText()
{
var txt1="Text.
"; // 以 HTML 创建新元素
var txt2=$("").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
删除
- remove() 删除
被选元素及其子元素 - empty() 删除被选元素的
子元素——清空 - remove(“params”) 可接收一个
参数，参数可为任何jQuery选择器的语法，删除满足条件的元素——过滤
CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
例子：
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
可以通过预先设置CSS样式，然后用jQuery添加到元素中。
尺寸
- width() 设置/返回元素宽度（不包括内边距、边框和外边距）
- height() 设置/返回元素高度（不包括内边距、边框和外边距）
- innerWidth() 设置/返回元素宽度（不包括边框和外边距）
- innerHeight() 设置/返回元素高度（不包括边框和外边距）
- outerWidth() 返回元素的宽度（包括内边距和边框）
- outerHeight() 返回元素的高度（包括内边距和边框）
outerWidth(true)和outerHeight(true) 返回包括内边距、边框和外边距。
设置时参数使用数字即可：
$("button").click(function(){
$("#div1").width(500).height(500);
});
遍历
通过遍历方法可以选取任何HTML元素。
祖先（向上遍历）
通过jQuery，可以很方便的向上遍历DOM树，查找元素的祖先。
parent()
返回直接父元素
例子：
$(function() {
var x = $("span").parent();
x.css({
color: "red",
border: "2px solid red"
});
});
parents()
返回所有祖先元素。
可以添加参数，返回指定元素的祖先元素。
参数是CSS选择器，十分灵活。
例子：
$(function() {
var x = $("span").parents("div");
x.css({
color: "red",
border: "2px solid red"
});
});
parentsUntil()
给定参数，返回两个给定元素之间的祖先元素。
例子：
$(function() {
var x = $("span").parentsUntil("div");
x.css({
color: "red",
border: "2px solid red"
});
});
后代（向下遍历）
children()
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
可以使用参数过滤对子元素的搜索。
例子：
$(function() {
var x = $("div").parents("p.test");
x.css({
color: "red",
border: "2px solid red"
});
});
find(params)
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代，即所有选定的子孙。
注意： find(params)必须要有参数。
$(document).ready(function(){
$("div").find("span");
});
如要返回所有子孙，使用选择器*：
$(document).ready(function(){
$("div").find("*");
});
兄弟（水平遍历）
-
siblings()
返回被选元素的所有兄弟元素。$(document).ready(function(){ $("h2").siblings(); });可以使用
参数过滤。$(document).ready(function(){ $("h2").siblings("p"); }); -
next()
返回被选元素之后的一个兄弟元素。**注意：**不可以使用
参数过滤。nextAll()
返回被选元素之后的所有兄弟元素。**注意：**不可以使用
参数过滤。nextUntil()
返回被选元素和指定元素之间的兄弟元素。prev()
prevAll()
prevUntil()
以上三种方法和next相类似，只是方向相反。
过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
- first() 返回被选元素的
首个元素 - last() 返回被选元素的
最后一个元素 - eq(n) 返回指定
索引号的元素，n从0开始 - filter() 返回
符合要求的元素 - not() 返回
不匹配标准的所有元素，与filter()相反
参考：
jQuery W3school