jQuery
https://github.com/jquery/jquery
jquery是一个js库，简化了js编程。
install:
$ npm install jqury
jquery功能：
- HTML 元素选取
- HTML 元素操作
- HTML 事件函数
- HTML DOM 遍历和修改
- CSS 操作
- JavaScript 特效和动画
- AJAX
- Utilities
syntax
对元素操作语法：
$(selector).action()
文档就绪函数:
$(document).ready(function(){
......
})
head中:
<head>
<script type="text/javascript>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
})
})
</script>
</head>
独立js文件
<head>
<script type="text/javascript" src="/path/to/my.js"></script>
</head>
选择器
https://api.jquery.com/category/selectors/
$(this).hide() this表示当前html元素
$("p.test") class="test"的<p></p>元素
$("p#test") id="test"的<p></p>元素
$("div#test .demo") id="test"的<div></div>中class=demo的元素
$("ul li:first") 每个<ul></ul>的第一个<li></li>
element选择器：
$("p").hide() 元素<p></p>
id选择器:
$("#test").hide() id="test"
class选择器:
$(".test").hide() class="test"
attribute选择器:
$("[href]") 所有带href属性的元素
$("[href='value']") 带有href属性且值等于value的元素
$("[href!='value']") 带有href元素且值不等于value的元素
$("[href$='.jpg']") 带有href属性且值以.jpg结尾的元素
子元素选择器/child:
后代选择器/descendant:
Event/事件
https://api.jquery.com/category/events/
$(selector).click(function) 单击事件
$(selector).dblclick(function) 双击事件
$(selector).focus(function) 焦点事件
$(selector).mouseover(function) 鼠标悬停事件
Effects/效果
basic
.hide()
.show()
.toggle()
custom
.animate()
.stop()
fading
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
sliding
.slideDown()
.slideToggle()
.slideUp()
core
核心功能
jQuery()
jQuery.noConflict()
使用其它代替$
<script type="text/javascript>
$.noConflict(); // 兼容其它库也是用$
my(document).ready(function(){
my("button").click(function(){
my("p").hide();
})
})
</script>
jQuery.ready
文档操作
属性操作
CSS操作
jquey css选择器改变元素的css属性:
.css()
// 修改<p></p>元素的背景色
$("p").css("background-color","red");
.addClass()
.hasClass()
Attributes
.attr()
.addClass()
.hasClass()
.html()
.val()
Data
.data()
.clearQueue()
.dequeue()
.queue()
.removeData()