最流行的JavaScript框架jQuery

                                             jQuery 库可以通过一行简单的标记被添加到网页中

                                             jQuery是一个轻量级的"写的少,做的多"的JavaScript库

                                            jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

​jQuery下载链接​

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");

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated hinge");
});
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>