jquery知识总结（1）

一、jQuery 的介绍
jQuery 是目前使用最广泛的 javascript 函数库。据统计，全世 界排名前 100 万的网站，有 46%使用 jQuery，远远超过其他库。微软 公司甚至把 jQuery 作为他们的官方库。 jQuery 的版本分为 1.x 系列和 2.x、3.x 系列，1.x 系列兼容低版 本的浏览器，2.x、3.x 系列放弃支持低版本浏览器，目前使用最多 的是 1.x 系列的。 jquery 是一个函数库，一个 js 文件，页面用 script 标签引入这 个 js 文件就可以使用。

jquery 的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
二、jQuery 入口函数
将获取元素的语句写到页面头部，会因为元素还没有加载而出错， jquery 提供了 ready 方法解决这个问题，它的速度比原生的window.onload 更快。

可以简写为：

三、jQuery 选择器
jquery的选择器有很多很多种比如 id选择器 class选择器 标签选择器 属性选择器 层级选择器 子代选择器 后代选择器 筛选选择器 表单选择器 常用的有以下几种

$(document) //选择整个文档对象
$(‘li’) //选择所有的 li 元素
$(’#myId’) //选择 id 为 myId 的网页元素
$(’.myClass’) // 选择 class 为 myClass 的元素
$(‘input[name=first]’) // 选择 name 属性等于 first 的 input 元素
$(’#ul1 li span’) //选择 id 为为 ul1 元素下的所有 li 下的 span 元素
对选择集进行修饰过滤(类似 CSS 伪类)
$(’#ul1 li:first’) //选择 id 为 ul1 元素下的第一个 li
$(’#ul1 li:odd’) //选择 id 为 ul1 元素下的 li 的奇数行
$(’#ul1 li:eq(2)’) //选择 id 为 ul1 元素下的第 3 个 li
$(’#ul1 li:gt(2)’) // 选择 id 为 ul1 元素下的前三个之后的 li
$(’#myForm :input’) // 选择表单中的 input 元素
$(‘div:visible’) //选择可见的 div 元素
对选择集进行函数过滤
$(‘div’).has(‘p’); // 选择包含 p 元素的 div 元素
$(‘div’).not(’.myClass’); //选择 class 不等于 myClass 的 div 元素 $(‘div’).filter(’.myClass’); //选择 class 等于 myClass 的 div 元素
$(‘div’).first(); //选择第 1 个 div 元素
$(‘div’).eq(5); //选择第 6 个 div 元素
jquery 用法思想一 选择某个网页元素，然后对它进行某种操作 jquery 选择器 jquery 选择器可以快速地选择元素，选择规则和 css 样式相同，
使用 length 属性判断是否选择成功。
四、jQuery 样式操作
jquery 用法思想二 同一个函数完成取值和赋值
操作行间样式
// 获取 div 的样式
$(“div”).css(“width”);
$(“div”).css(“color”);
//设置 div 的样式
$(“div”).css(“width”,“30px”);
$(“div”).css(“height”,“30px”);
$(“div”).css({fontSize:“30px”,color:“red”});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：
$(“div”).css(“width”)，获取的是第一个 div 的 width。
操作样式类名
$("#div1").addClass(“divClass2”) //为 id 为 div1 的对象追加样式 divClass2 $("#div1").removeClass(“divClass”) //移除 id 为 div1 的对象的 class 名为 divClass 的样式 $("#div1").removeClass(“divClass divClass2”) //移除多个样式 $("#div1").toggleClass(“anotherClass”) //重复切换 anotherClass 样式
五、jQuery 属性操作
1. html() 取出或设置 html 内容

2. text() 取出或设置 text 内容、

// 取出文本内容
var $htm = $(’#div1’).text();
// 设置文本内容
$(’#div1’).text('添加文字');

// 取出图片的地址
var $src = $(’#img1’).attr(‘src’);
// 设置图片的地址和 alt 属性
$(’#img1’).attr({ src: “test.jpg”, alt: “Test Image” });
六、绑定 click 事件
$(’#btn1’).click(function(){
// 内部的 this 指的是原生对象
// 使用 jquery 对象用 $(this)
})
七、jQuery 的特效效果及链式调用
//fadeIn() 淡入
$btn.click(function(){
$(’#div1’).fadeIn(1000,‘swing’,function(){
alert(‘done!’);
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery 对象的方法会在执行完后返回这个 jquery 对象，所有 jquery 对象的方 法可以连起来写：
$(’#div1’) // id 为 div1 的元素
.children(‘ul’) //该元素下面的 ul 子元素
.slideDown(‘fast’) //高度从零变到实际高度来显示 ul 元素
.parent() //跳到 ul 的父元素，也就是 id 为 div1 的元素
.siblings() //跳到 div1 元素平级的所有兄弟元素
.children(‘ul’) //这些兄弟元素中的 ul 子元素
.slideUp(‘fast’); //高度实际高度变换到零来隐藏 ul 元素
八、jQuery 动画
通过 animate 方法可以设置元素某属性值上的动画，可以设置一个或多个属性 值，动画执行完成后会执行一个函数。

   $('#div1').animate({
         width:300, 
         height:300 },1000,swing,function(){ 
         alert('done!'); });

参数可以写成数字表达式：

$('#div1').animate({ 
width:'+=100', 
height:300
 },1000,swing,function(){
  alert('done!');
   });