JQuery 的使用基础
参考资料
在JQuery中,感觉选择器是一个神奇的东西,各种各样的选择器用溜了能够很好地实现代码的简洁性。
使用jQuery
1.先从官方网站下载JQuery库
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之后感触颇深,想学好一种代码真的需要自己动手搞一搞。