Front End Development我爱编程

jQuery

2017-03-21  本文已影响71人  归云丶

Learn how Script Tags and Document Ready Work

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

浏览器会运行 script 里所有的Javascript,包括jQuery。
The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.
在没有document ready function以前,你的代码会在HTML没有渲染完成就执行,这样会产生bug。


Target HTML Elements with Selectors Using jQuery

$("button").addClass("animated bounce");(确保已引入jQuery库和Animate.css库)
注:另外,single-quote selectors(单引号选择器)不会通过测试,一定要使用double-quote selectors(选择器)


Target Elements by Class Using jQuery

我们是怎么给所有的按钮做弹回效果的?

  1. $("button")来选中按钮
  2. .addClass("animated bounce")给按钮加CSS class。
    同理,我们来使用$(".well")来获取所有class为well的div元素,在well前加** . **就像之前CSS声明一样。
    然后使用jQuery的.addClass()方法添加2个class:animated、shake。

Target Elements by ID Using jQuery


Target the same element with multiple jQuery Selectors

现在你已经了解了3种选择器:元素选择器:$("button")、class选择器:$(".btn")、id选择器:$("#target1")。


Remove classes from an element with jQuery


Change the CSS of an Element Using jQuery


Disable an Element Using jQuery


Change Text Inside an Element Using jQuery


Remove an Element Using jQuery


Use appendTo to Move Elements with jQuery


Clone an Element Using jQuery

除了移动元素,你还可以拷贝元素。简单理解:移动元素就是剪切,拷贝元素就是复制。


Target the Parent of an Element Using jQuery


Target the Children of an Element Using jQuery

每个人都继承了自己的父母的一些属性,譬如:DNA、相貌、血型、体型等等,HTML也不例外。许多HTML元素都有children(子元素),每个子元素都从父元素那里继承了一些属性。


Target a Specific Child of an Element Using jQuery

你已经看到了当用jQuery选择器通过id属性来选取元素的时候是多么方便,但是你不能总是写这么整齐的id。
幸运的是,jQuery有一些另外的技巧可以达到同样的效果。


Target Even Numbered Elements Using jQuery

even-numbered 偶数的
odd-numbered 奇数的


Use jQuery to Modify the Entire Page

上一篇 下一篇

猜你喜欢

热点阅读