jQuery-CSDN博客

本文链接：https://blog.csdn.net/cola_6/article/details/121227418

jQuery

jQuery简介

jQuery也就是JavaScript和查询(Query)即辅助JavaScript开发的类库。
jQuery是一个兼容多浏览器的javascript库。

核心理念是 write less,do more (写得更少,做得更多)。

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入。
曾经，jQuery是最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery！

jQuery的优点：轻量级、强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、便捷的链式操作、丰富的插件支持、完善的文档、学习成本低、开源等等

大多数 JavaScript 类库一般都具备的特性包括：
选择器(Selector)、DOM操作、实用函数、事件处理、Ajax等

jQuery使用

进入jQuery官网或其他平台下载jQuery文件，并且引入页面：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

下载: http://www.jq22.com/jquery-info122

通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中，已被精简和压缩
开发版 - 用于测试和开发，未压缩，是可读的代码

注意：2.0及之后的版本，不再兼容 IE 6 7 8

也可以引入服务器上的jQuery文件

<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

在jQuery库中，$ 就是jQuery的一个简写形式(别称)
例如： $(“#nan”) === jQuery(“#nan”)

当浏览器解析完DOM之后，执行ready小括号内的函数
$(document).ready( function () { …} )
可简写为：$(function () {…} )

jQuery选择器

选择器：简洁的写法，支持CSS1到CSS3的选择器

$(“#test”)选取id为test的元素---单个元素
$(“.test”)选取所有class为test的元素---元素集合
$(“div”)选取所有的<div>元素---元素集合
$(“div  span”)选取<div>里的所有的<span>(可以选到子和孙所有元素)元素---元素集合
$(“div:first”)选取所有<div>元素中第1个<div>元素---单个元素
$(“div:last”)选取所有<div>元素中最后一个<div>元素---单个元素
$(“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的<input>元素---元素集合
$(“input:odd”)选取索引(索引从0开始)是奇数的<input>元素---元素集合
$(“div[title=test]”)选取属性title为“test”的<div>元素---元素集合
$(“div:nth-child(1)”) 选取所有div中，是其父标签的第一个子元素的div元素---元素集合
$("a:contains('x')")   选取出含内容x的a标签

jQuery DOM

创建节点:
运用传统的javascript方法，创建一个div节点：
var newDiv = document.createElement(‘div’);
newDiv.innerText = ' 新建节点';

jQuery中创建一个div节点：
$(‘<div>新建节点</div>’);

插入节点:
用javascript方法，插入一个节点：
var Newp = document.createElement(“p”);
document.body.appendChild(Newp);

jQuery中插入节点：例：$( a ).append( c );
append  ------a里末尾插c
appendTo  ---c插到a里末尾
prepend ------a里前面插c
prependTo ---c插到a里前面

after-----------a之后插c
insertAfter ----c插到a之后
before --------a之前插c
insertBefore --c插到a之前

删除节点:
用javascript方法，删除一个节点：
var b = document.getElementById(“test”);
var c = b.parentNode;
c.removeChild(b);

jQuery中删除节点：
$('#test').remove();
remove() 删除节点
empty() 清空节点内容
detach() 移除被选元素，包括所有的文本和子节点，返回移除元素的副本

替换节点:
用javascript方法，替换节点：
parent.replaceChild( newNode , oldNode );

jQuery中替换节点：
$(“<p>替换 </p>”).replaceAll(“#test1″);

复制节点:
运用传统的javascript方法，复制一个节点：
var txt = document.querySelector("p");
var clonep = txt.cloneNode(true);
document.body.appendChild(clonep);

jQuery中复制一个节点：
var clone_a = a.clone(true);  深复制包括事件处理程序
$('body').append(clone_a);

常用方法:

.children() 获得匹配元素集合中每个元素的所有子元素
.next() 获得匹配元素集合中每个元素的下一个同辈元素
.prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素
.parent() 获得当前匹配元素集合中每个元素的父元素
.closest() 从当前元素开始，返回最先匹配到的符合条件的父元素
.find(child) 获得当前匹配元素集合中每个元素的后代
.siblings() 获得匹配元素集合中所有元素的同辈元素
.eq() 匹配元素集合中指定索引的一个元素
. index() 方法返回指定元素相对于其他指定元素的 index 位置
.end() 将匹配的元素变为前一次的状态
.each() 循环，为每个匹配的元素执行函数
.is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true
.addClass() 为每个匹配的元素添加指定的类名    add()
.removeClass() 从匹配的元素中删除全部或者指定的类  remove()
.toggleClass() 从匹配的元素中添加或删除一个类     toggle()
.hasClass() 检查元素是否含有某个特定的类，有则返回true     contains()

.attr() 设置或返回被选元素的属性和值  Attrubute
.prop() 设置或返回被选元素的属性和值
注意：prop() 方法应该用于检索属性值，例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。

.removeAttr() 从每一个匹配的元素中删除一个属性
.html() 设置或取得第一个匹配元素的html内容
.text() 设置或取得第一个匹配元素的文本内容
.val() 设置或返回匹配元素的值(表单元素)
.css() 设置或返回匹配元素的样式属性
.width() 设置或返回匹配元素的宽度
.height() 设置或返回匹配元素的高度
.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移
.position() 获取匹配元素相对于定位父元素的偏移  {left: 40,  top: 50}
.offset() 获取或设置匹配元素在当前视口的相对偏移  {left: 40,  top: 50}
. wrap() 使用指定的 HTML 元素来包裹每个被选元素
$("p").wrap("<div></div>"); // 给每个P元素包裹一个div元素
$.trim( str ) 函数会移除字符串开始和末尾处的所有空白字符
$.each() 遍历数组
$.each(data,function (index,value) {
    console.log('数组当前元素的索引' + index);
    console.log('数组当前元素的值' + value);
});

jQuery动画

展开／收起:
slideUp(null/speed , easing , fn); 收起
slideDown(null/speed , easing , fn); 展开
参数：可选
null：不传参，执行默认效果
speed：'slow'|'normal'|'fast' 或毫秒数
easing：指定动画效果，默认是"swing"，可扩展 linear
fn：回调函数，当动画执行完毕以后执行

示例

$('#con').slideDown( 1000 , 'swing' , function (){ alert('123'); } );
$('#con').slideUp({
       duration:1000,
       easing:'easeOutElastic',
       complete:function (){
            alert('再见~');
       }
});

反转开关:(显示/隐藏)
toggle(null/speed , easing , fn);
参数：可选
null：不传参，执行默认效果
speed：'slow'|'normal'|'fast' 或 毫秒数
easing：指定动画效果，默认是"swing"，可扩展
fn：回调函数，当动画执行完毕以后执行

1.用于绑定两个或多个事件处理器函数，以响应被选元素轮流的 click 事件
2.如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

显示隐藏：
show(null/speed , easing , fn);   显示
hide(null/speed , easing , fn);   隐藏
参数：可选
null：不传参，执行默认效果
speed：'slow'|'normal'|'fast' 或 毫秒数
easing：指定动画效果，默认是"swing"，可扩展
fn：回调函数，当动画执行完毕以后执行

淡入淡出：
fadeIn(null/speed , easing , fn);   淡入
fadeOut(null/speed , easing , fn);   淡出
参数：可选
null：不传参，执行默认效果
speed：'slow'|'normal'|'fast' 或 毫秒数
easing：指定动画效果，默认是"swing"，可扩展
fn：回调函数，当动画执行完毕以后执行

自定义动画：
用法一 : animate({styles} , speed , easing , fn)
参数：可选
{styles}：一组css设置集合
speed：'slow'|'normal'|'fast' 或 毫秒数
easing：指定动画效果，默认是"swing"，可扩展
fn：回调函数，当动画执行完毕以后执行
animate( )方法执行css属性集的自定义动画

用法二 : animate({styles} ,{queue,duration,easing,complete});
参数：
{styles}：一组css设置集合
queue：是否加入动画队列执行 true/false (默认true)
duration：定义动画持续时间
easing：指定动画效果，默认是“swing”，可扩展
complete：回调函数，当动画执行完毕以后执行

可操作属性：
不是所有的css属性都可以用Jquery动画(animate函数)来动态改变，下面是JQ可以操作的css属性：
backgroundPosition    borderWidth    borderBottomWidth
borderLeftWidth    borderRightWidth    borderTopWidth
borderSpacing    margin    marginBottom    marginLeft
marginRight    marginTop    outlineWidth    padding
paddingBottom    paddingLeft    paddingRight
paddingTop    height    width    maxHeight    maxWidth
minHeight    maxWidth    font    fontSize    opacity
bottom    left    right    top    letterSpacing    wordSpacing
lineHeight     textIndent     scrollLeft     scrollTop
… …

停止动画：
stop()停止当前动画(并不会停止动画队列中剩下的动画)
stop(true)停止所有动画
stop(true,true)停止所有动画,并到达当前动画的终点
$("#go").click(function(){
  $(“.block”).animate({left: ‘200px'}, 5000);
});
$("#stop").click(function(){
  $(".block").stop(); //停止当前动画
});

Q.E.D.