最流行的JavaScript框架jQuery
jQuery 库可以通过一行简单的标记被添加到网页中
jQuery是一个轻量级的"写的少,做的多"的JavaScript库
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
BootCDN:<script src=“https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js“> </script>
百度 CDN:<script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js“> </script>
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
function里面的代码会在浏览器加载页面后立即运行。
这很关键,因为在没有document ready function以前,代码可能会在HTML渲染完成之前就执行了,这样会产生bug。
三种获取元素的方式:
type选择器 $("button")
class选择器 $(".btn")
id选择器 $("#target1")
只需要用jQuery的.addClass()方法,就可以给元素加class了。
通过jQuery的removeClass()方法删除元素的class。
直接通过jQuery来改变HTML元素的CSS样式。
jQuery有一个叫做.css()的方法,能让你改变元素的CSS样式。
以下代码显示如何将颜色改变成蓝色:
$("#target1").css("color", "blue");
这跟一般的CSS语法有点不同,因为这里的CSS属性和值是在引号内的,并且用逗号分开,而不是冒号。
jQuery有一个.prop()的方法,可以让你来调整元素的属性。
以下代码显示如何禁用所有按钮:
$("button").prop("disabled", true);
jQuery不仅可以改变HTML元素开始和结束标签之间的文本,还可以改变HTML元素标记本身。
jQuery有一个.html()方法,可以让你在元素中添加HTML标签和文字,而元素中之前的内容都会被方法中的内容所替换掉。
Query 还有一个类似的方法叫.text(),它只能改变文本但不能添加标签。换句话说,这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。
以下代码显示如何重写和强调标题文本(使用em标签):
$("h3").html("<em>jQuery Playground</em>");
jQuery 有一个.remove()的方法,可以彻底删除一个HTML元素。
jQuery有一个appendTo()方法,可以让你把选中的HTML元素附加到其他元素中。
比如,我们想让target4从right-well移动到left-well,我们用以下代码:
$("#target4").appendTo("#left-well");
jQuery有一个clone()方法,可以复制元素
例如,如果我们想把target2从left-well复制到right-well,我们用以下代码:
$("#target2").clone().appendTo("#right-well");
注意到上面是将两个jQuery方法合在一起使用了。
这种叫方法链function chaining,它是jQuery的一种便捷方式。
每个HTML元素都有一个parent元素,并从中继承属性。
jQuery有一个parent()方法,可以允许你访问选定元素的父元素。
许多HTML元素都有children(子元素),子元素从父元素那里继承属性。
jQuery有一个children()方法,可以让你访问选定元素的子元素。
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
jQuery用CSS选择器来获取元素,target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素
以下代码显示如何给jQuery Playground中的每个井中(left well和right well)的第三个子元素添加bounce类:
$(".target:nth-child(3)").addClass("animated bounce");
Query的:odd选择器用于匹配所有索引值为奇数的元素,将其封装为jQuery对象并返回
odd选取的是偶数,:even选取的是奇数。
// 这里的selector表示具体的选择器
jQuery( "selector:odd" )
注意:由于索引值是从0开始计数的,因此奇数索引上的元素实际上是自然顺序上为偶数的元素。
jQuery也可以获取body元素。
以下代码显示如何让整个body有淡出效果:
$("body").addClass("animated fadeOut");