我爱编程

JQuery 的使用基础

2017-01-22  本文已影响0人  凤爪dc

参考资料

在JQuery中,感觉选择器是一个神奇的东西,各种各样的选择器用溜了能够很好地实现代码的简洁性。

使用jQuery

1.先从官方网站下载JQuery库

http://jquery.com/download/

2.添加到HTML文件中

  <body>
    <script src="jquery-3.1.1.js"></script>
  </body>

3.将自己编写的js文件导入

  <script src="main.js"></script>

语法

  $("selector").action().action()  //action可以多个

$:定义jQuery的符号,也可直接jQuery("selector")
selector(选择器):选择出要动手的元素
action : 要执行的操作

选择器(selector)

1.直接对所有元素进行选择

| 选择器 | 选取 |
| -
| $("*") | 所有元素 |
| $(".intro") | 所有class为intro的元素 |
| $("#pp") | 所有id 为pp的元素 |
| $("p") | 所有的p元素 |
可互相搭配,p.intro,p#pp,.intro.intro2……等等

2.对直接的元素细化

| 选择器 | 选取 |
| -
| $("p:first") | 第一个P元素 |
| $("p:last") | 最后一个p元素 |
| $("tr:even") | 所有偶数的tr元素 |
| $("tr:odd") | 所有奇数的tr元素 |

3.选择带有某种属性的

| 选择器 | 选取 |
| -
| $("[href]") | 选择带有href的元素 |
| $("[href='#']") | 选择href属性为#的元素 |
| $("[href!='#']") | 选择href属性不为#的元素 |
这里,href可以改成其他已定义的属性,可以通过自己设定一个属性达到对HTML元素的灵活选取。
此外还有与input有关的选择器
jQuery参考手册

action

像基础的效果,对HTML文档的处理,对DOM树的遍历...可以直接通过查询参考API
jQuery可以创建自定义动画

  $("selector").animate({params},speed,callback);

params(必须的):定义形成动画的CSS属性
speed(效果的时长):可选"slow","fast",毫秒

animate 可同时操作多个属性

  $("div").animate({ 
   opacity:'0.5',
   width :"150px",
   height:"40px"     
  })

注意:animate几乎可以操作CSS的所有属性,但必须使用camel标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right。
同时,色彩动画并不包含在核心 jQuery 库中,如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。

animate队列功能

  $("button").click(function(){
       var div=$("div");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow");
  });

可以按顺序逐一实现动画的功能

相应的,就有stop方法
语法:

  $("selector").stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

小结:要使用jQuery,要灵活使用各种选择器,还需要知道有什么行为(action)可以做。从自己使用jQuery做了一个简易demo之后感触颇深,想学好一种代码真的需要自己动手搞一搞。

上一篇下一篇

猜你喜欢

热点阅读