jQuery总结

jQuery 选择器

例1：在页面中选取所有 <p> 元素: $("p")

例2：在页面中选取所有 id="test" 元素:$("#test")

例3：在页面中选取所有 class="test" 元素:$(".test")

关于 : 和 [ ] 这两个符号的理解

：可以理解为种类的意思，如：p:first，p 的种类的第一个。

[ ] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素

$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的 <p> 元素
$(“p#intro”) 选取 id 为 intro 的 <p> 元素
$(“p:first”) 选取第一个 <p> 元素
$(“ul li:first”) 选取第一个 <ul> 元素的第一个 <li> 元素
$(“ul li:first-child”) 选取每个 <ul> 元素的第一个 <li> 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(“:button”) 选取所有 type=”button” 的 <input> 元素和 <button> 元素
$(“tr:even”) 选取偶数位置的 <tr> 元素
$(“tr:odd”) 选取奇数位置的 <tr> 元素

jQuery 事件

click （当单击元素时，发生 click 事件）

$(function () {
        <!--单击元素button时触发click事件-->
        $("button").click(function () {
            //事件执行代码
        });
});

dblclick（当双击元素时，触发 dblclick 事件）
mouseenter（当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件）

mouseleave（当鼠标离开被选元素时，会发生 mouseleave 事件）

//遇到时背景颜色变红，离开时背景恢复白色
$("#color").mouseenter(function () {
       $("#color").css("background-color","red")
   $("#color").mouseleave(function () {
      $("#color").css("background-color","white")
})

mouseover （事件在鼠标移动到选取的元素及其子元素上时触发）
hover（hover方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)）
focus（当元素获得焦点时，发生 focus 事件）
blur（当元素失去焦点时，发生 blur 事件）
keypress （在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发）
```
//定义初始值为0，每次在input元素中键盘输入值时，span元素中的值+1
i=0;
$("input").keypress(function () {
$("span").text(i+=1);
   });
```
submit（当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素）
change （当元素的值改变时发生 change 事件 仅适用于表单字段）

resize （当调整浏览器窗口大小时，发生 resize 事件）

$(window).resize(function () {
alert("调整窗口大小成功")
 })

scroll（当用户滚动指定的元素时，会发生 scroll 事件）

jQuery 效果- 隐藏和显示

hide() 和 show()

//点击button，p元素内容隐藏，点击id=t的元素，p元素内容显示
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
    $("#t").click(function(){
    $("p").show(1000);
    });
});
<body>
<button>隐藏</button>
    <button id="t">显示</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>

语法
$(selector).hide(speed,callback); 和 $(selector).show(speed,callback);

笔记

$(selector)选中的元素的个数为n个，则callback函数会执行n次；
callback函数名后加括号，会立刻执行函数体，只会调用一次，而不是等到显示/隐藏完成后才执行；
callback既可以是函数名，也可以是匿名函数

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle()使用 toggle() 方法来切换 hide() 和 show() 方法

语法$(selector).toggle(speed,callback);

jQuery 效果- 淡入淡出

fadeIn() 用于淡入已隐藏的元素 display:none

语法$(selector).fadeIn(speed,callback);

fadeOut() 用于淡出可见元素
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）

语法$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

jQuery 效果 - 滑动

slideDown() 用于向下滑动元素
slideUp() 用于向上滑动元素
slideToggle() 可以在 slideDown() 与 slideUp() 方法之间进行切换

jQuery 效果- 动画

animate()

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

必需的 params 参数定义形成动画的 CSS 属性。

//点击按钮，文字向右移动250px，不透明度为0.5
$("#动画").click(function () {
    $("#move").animate({
    left:'250px',
    opacity:'0.5'
    },1000);
   //使用相对值（每次在原先的基础上改变）    
    $("div").animate({
          left:'50px',
          height:'+=150px',
          width:'+=150px'
});
//甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
    $("div").animate({
      height:'toggle'
    });
})

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。jQuery 提供针对动画的队列功能，意味着当有多个 animate() 调用时，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。

同时，色彩动画并不包含在核心 jQuery 库中,如要色彩改变，需要添加这个插件

<script
  src="http://code.jquery.com/color/jquery.color-2.1.2.js"
  integrity="sha256-1Cn7TdfHiMcEbTuku97ZRSGt2b3SvZftEIn68UMgHC8="
  crossorigin="anonymous"></script>

jQuery 停止动画

stop()

语法$(selector).stop(stopAll,goToEnd);

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

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery Callback 方法

回调函数

//上一个事件100%完成后执行,中途中断暂停的不执行回调函数
 $("#oh").click(function () {
    $("#change").toggle(1000,function () {
        alert("成功")
    })
})

jQuery - 链(Chaining)

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

//"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery - 获取/设置内容和属性

获得内容 - text()、html() 以及 val()

设置内容 - text(“Hello world!”)、html(<mark>Hello world!</mark>) 以及 val()

这里注意html与text设置内容的区别是：一个识别html标签另一个不识别

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

//需要注意的是如果在一个字符串前加一个加号（+）js会尝试转换字符串为数值类型 如3+4+5=12
//如果不加则会字符串相加 如3+4+5=345
$("#add").click(function () {
alert(+$("#text1").val()+ +$("#text2").val()+ +$("#text3").val())
})

获取属性 - attr() 经常用到

//用于获取id为runoob对应的href属性值
$("button").click(function(){
alert($("#runoob").attr("href"));
  });

jQuery - 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

区别：

append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素(比如div不会删除，但里面的<p>会清空)

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类,多个类空格分开
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
- 如需返回指定的 CSS 属性的值，请使用如下语法：css("propertyname");
- 如需设置指定的 CSS 属性，请使用如下语法：css("propertyname","value");
- 如需设置多个 CSS 属性，请使用如下语法：css({"propertyname":"value","propertyname":"value",...});

jQuery 尺寸

jQuery尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。

jQuery 遍历

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

遍历jQuery祖先元素
- parent() 返回被选元素的直接父元素
- parents() 返回被选元素的所有祖先元素(包括父元素)，它一路向上直到文档的根元素 (<html>)，函数内可以有参数来过滤对祖先元素的搜索
- parentsUntil(参数) 返回介于两个给定元素之间的所有祖先元素
遍历jQuery后代元素
- children() 返回被选元素的所有直接子元素，如<div>下有2个<p>，那便返回2个<p>
- find(参数) $("div").find("*")表示返回 <div> 的所有后代 ("div").find("span") 返回属于 <div> 后代的所有 <span> 元素
遍历jQuery同胞元素
- siblings() 方法返回被选元素的所有同胞元素，不包括自己
- next()/prev() 方法返回被选元素的下一个/上一个同胞元素，该方法只返回一个元素
- nextAll()/prevAll() 方法返回被选元素的后面/前面的所有同胞元素
- nextUntil()/prevUntil() 返回介于两个给定参数之间的所有跟随的同胞元素$("h2").nextUntil("h6")表示返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
  
  注意nextUntil()必须是选定元素后面的同胞元素,否则直接选取选定元素后面的所有同胞元素
jQuery 过滤
- first() 返回被选元素的首个元素
  - last() 返回被选元素的最后一个元素
- eq(index) 返回被选元素中带有指定索引号的元素，index从0开始
- filter(标准) 允许您规定一个标准，匹配的元素会被返回
- not(标准) 返回不匹配标准的所有元素

jQuery - AJAX

AJAX介绍：在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，AJAX = 异步 JavaScript 和 XML

callback参数

可选的 callback 参数规定当方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

jQuery load() 方法

语法:$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
$("#div1").load("test.txt #p1");把 “test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的 <div> 元素中
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

jQuery - AJAX get() 和 post() 方法

方法用于通过 HTTP GET 或 POST 请求从服务器请求数据

顺便一提，与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET

语法：$.get(URL,callback); $.post(URL,data,callback);可选的 data 参数规定连同请求发送的数据

jQuery - noConflict() 方法

目的：为了防止其他js框架也用$符号作为jQuery的简写而产生冲突，我们可以使用noConflict()

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

jQuery - 计时器

实例：获得每秒钟的本地时间

1	<p style="color: red"></p>

setInterval(function () {
        var mydata = new Date().toLocaleString()
        $("p").text(mydata);
 },1);