jQuery

https://github.com/jquery/jquery

https://www.jquery123.com/

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()

Ajax