FCC学习笔记-(三) JQuery

(三) JQuery

JQuery

jQuery 是一种快速简洁的 JavaScript 库。JQuery 简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互，用于快速 web 开发。jQuery 是一个 JavaScript 工具包，旨在通过编写更少的代码来简化各种任务。

Script tag

• 浏览器会运行script元素中的任何Javascript，包括JQuery。
• 一旦浏览器加载页面，function内的函数就开时运行
• 如果没有document ready function函数，代码将会在HTML显示前运行，这将产生许多bug。

<script>$(document).ready(function(){ });</script>

Target Elements by three ways

• JQuery通常选择一个HTML元素作为选择器（seletor）,对该元素进行操作。
  下列代码执行了令button元素弹起的动作，用到了JQuery 库和Animated.css库。JQuery 把Animated.css库的bounce类应用到了button元素。
  addClass( ): 给元素增加class
  注意”;”符号

<script> $(document).ready(function(){ $("button).addClass("animated bounce"); });</script>

• 通过JQuery，用class来trage元素
  注意，像类的声明一样，class前加了符号“.”

<scirpt> $(document).ready(function(){ $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); {);</script>

• 同样的，用id来target元素

<script> $(document).ready(function(){ $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); $("#target").addClass("animtaed fadeOut"); });</script>

• 同一个元素增加多个class

<script>  $(document).ready(function() {  $("button").addClass("animated");  $(".btn").addClass("shake")  $("#target1").addClass("btn-primary")  });</script>...<button class="btn btn-default target" id="target1">#target1</button>

Remove Classes

既然有addClass( )用来添加class, 那么必然有removeClass( )来yichu。

$("button").removeClass("btn-default");

Change the CSS

• 利用JQuery，可以通过 css( )来改变元素的css

• 注意
  不同于一般的CSS声明， css( ) 里的CSS属性和它的value需要加引用符号,colon改为comma。

 $("traget1").css("color","red");

<script> $(document).ready(function(){ $("traget1").css("color","red"); });</script>

Disabled element

• JQuery 的 .prop( )函数可以调整元素的属性
  比如disabled 一个button，target1 将变成灰色，不可点击。
  prop( )函数： 调整元素属性
• 注意
  true没有引用符号

$("#target1").prop("disabled",true);

Change Text inside an element

• html( )函数
  在一个元素内添加HTML Tag和text, 之前元素里的任何内容都会函数提供的内容被替代。

$("target4").html("<em>Target4</em>);

• text( )函数
  只替text，不替换HTML Tag

$("#target2").text("only replace text");

Remove an Element

• remove( )
  移除一个元素

$("#target").remove();

Move an Element

• appendTo( )
  将一个HTML元素从一个div移动到另一个div

$("#target2").appendTo("#right-well");

Clone an Element

• 另一种移动元素的方法

• clone( )
  copy 一个元素,下列代码先copy
  在appendTo，这种sticking two functiions 叫做 funcrion chaining

$("#target5").clone().appendTo("#left-well");

Target the Parent of an Element

• parent( )函数
  允许访问一个element的父类

$("#target1").parent().css("background","red");

• 跟直接css( )有啥区别？

parent().css()是对#target1的父类div操作；也就是说 $("#target1").parent()指的是父类；而.css()只对#target1有效。

Target the children of an Element

• 有parent，便有children
• children()
  允许访问一个element的子类(所有子类）

$("#right-well").children().css("color","orange");

Target a Specifc Child of an element

• 不是所有id都很整洁，所以需要另一种方法来target正确的元素。

target:nth-child(n)

• target是一个类属性
  target:nth-child(n)是一个CSS选择器，允许我们选择所有的nth元素来target 类或者元素类型。n代表第几个child。

• 作用范围
  有target属性的父类中

$(".target:nth-child(2)").addClass("animated bounce");

Target Even Numbered Element

• 对target奇偶元素操作
• JQuery是zero-indexed，选择器odd选择第2，第4，…个元素。

$(".target:even").addClass("animated shake");

Modify the Entire Page

• Target body元素
  通过target body元素，可以实现对整个页面的操作。

!("body").addClass("animated hinge");

最后一个问题

<button class="target"></button> 中target的作用？

• 并不是每一个 class 属性都是用于 CSS 的。 有些时候创建一些 class 只是为了更方便地在jQuery中选中这些元素。