JQuery笔记
一.了解
JavaScript库
即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate，hide，show，比如获取元素等
简单理解：
就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能，
比如jQuery，就是为了快速方便的操作DOM,里面基本都是函数（方法）；
常见的JavaScript库
- JQuery
- Prototype
- YUI
- Dojo
- Ext Js
- 移动端的zepto
- 这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。
JQuery的概念
- JQuery是一个快速，简洁的JavaScript库，倡导写更少的代码，做更多的事情
- J就是JavaScript;Query查询，意思就是查询JS，把JS中的DOM操作做了封装，我们可以快速的查询使用里面的功能
- JQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互
- 学习jQuery本质：就是学习调用这些函数（方法）
- jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率
二.基本使用
JQuery的入口函数
$(function(){
......//此处是页面DOM加载完成的入口
})；
$(document).ready(function(){
......//此处是页面DOM加载完成的入口
});
- 等着DOM结构渲染完毕即可执行内部代码，不必等到外部资源加载完成，jQuery帮我们完成了封装
- 相当于原生js中的DOMContentLoaded
- 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码
JQuery对象和DOM对象
- 用原生js获取的对象就是Dom对象
- JQuery方法获取的元素就是JQuery对象
- JQuery对象的本质是：利用
$对Dom对象包装后产生的对象（伪数组形式存储) - 控制台打印出来的结果不同
- JQuery对象只能使用 JQuery 方法，DOM对象则使用原生的JavaScirpt属性和方法
var myDiv =document.querySelector("div");//myDiv 是DOM对象
$("div");//$("div")是jQuery对象
$("div").style.display="none";//错误
myDiv.hide();//错误
$是JQuery的别称，在代码中可以使用JQuery代替$,但一般为了方便，通常都直接使用$$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法
DOM对象与jQuery对象可以相互转换
//DOM对象转换为jQuery对象：
$(DOM对象)
//jQuery对象转换为DOM对象（两种方式）
$('div')[index] index 是索引号
$('div').get(index) index是索引号
//例：
var myvideo =document.querySelector("video");
$(myvideo);
$("video")[0].play();
$("video").get[0].play();
JQuery选择器
JQuery基础选择器
$("选择器");//里面选择器直接写CSS选择器即可，但是要加引号
隐式迭代
概念：遍历内部dom元素（伪数组形式存储）的过程 (将匹配的所有元素内部进行循环遍历，给每一个元素添加css这个方法)
//jQuery设置样式
$('div').css('属性','值');
//获取四个div元素
console.log($("div"));
//给四个div设置其背景颜色为粉色
$("div").css("background","pink");
jQuery筛选选择器
$("li:first");//获取第一个li元素
$("li:last");//获取最后一个li元素
$("li:eq(2)");//获取到的li元素中，选择索引号为2的元素，索引号Index从0开始
$("li:odd");//获取到的li元素中，选择索引号为奇数的元素
$("li:even");//获取到的li元素中，选择索引号为偶数的元素
$(function(){
$("ul li:first").css("color","red");//获取ul内第一个li，颜色为红色
$("ul li:eq(2)").css("color","blue");//获取ul中的li索引号为2的元素，设置其颜色为蓝色
})
jQuery筛选方法
//常见
$("li").parent();//查找父级
$("li").parents("需要查找到的元素");//查找其祖先级
$("ul").children("li");//相当于$（"ul>li"）,最近一级
$("ul").find("li");//相当于$("ul li"),后代选择器
$("li").eq(2); //相当于$(li:eq(2)"),index从0开始，更推荐这种写法
//不常见
$(".first").siblings("li");//除开自己本身的兄弟元素
$(".first").nextAll();//查找当前元素之后所有的同辈元素
$(".last").prevAll();//查找当前元素之前所有的同辈元素
$("div").hasClass("protected");//检查当前的元素是否含有某个特定的类，有则返ture
jQuery中的排他思想
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function(){
//隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function(){
//当前的元素变化背景颜色
$(this).css("background","pink");
//其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background","");
});
});
</script>
三.JQuery样式操作
JQuery样式
//参数只写属性名，则返回属性值
$(this).css("color");
//参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，但若值是数字可以不用加引号
$(this).css("color","red");
//参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
$("div").css({
width:400,
height:400,
backgroundColor:"red"
//若为复合属性值则需要采取驼峰命名法，若值不是数字，则需要加引号
});
设置类样式方法（其中类名不需要加" . "）
//添加类 addClass()
$("div").addClass("current");
<body>
<style>
.current{
background:red
}
</style>
<div><div>
$(function(){
$("div").click(function(){
$(this).addClass("current");
});
});
</body>
//删除类 removeClass()
$("div").click(function(){
$(this).addClass("current");
});//样式写法同上
//切换类 toggleClass()//添加或移除类名
$("div").click(function(){
$(this).toggleClass("current");
});
类操作与className的区别
- 原生js中className会覆盖元素原先的类名
- jQuery里面的类操作只是对指定类进行操作，并不影响原先的类名（相当于对原先的类名进行追加，并不影响以前的类名）
四.jQuery效果
显示隐藏效果
//显示语法规范
show([speed,[easing],[fn]]);
//隐藏语法规范
hide([speed,[easing],[fn]]);
//切换语法规范
toggle([speed,[easing],[fn]]);
滑动效果
//下滑效果语法规范
slideDown([speed,[easing],[fn]]);
//上滑效果语法规范
slideUp([speed,[easing],[fn]]);
//滑动切换效果语法规范
slideToggle([speed,[easing],[fn]]);
//简洁版滑动菜单
$("div").hover(function(){
$(this).childern("ul").slideToggle();
});
淡入淡出效果
//淡入
fadeIn([speed],[easing],[fn]);
//淡出
fadeOut([speed],[easing],[fn]);
//淡入淡出切换
fadeToggle([speed],[easing],[fn]);
//透明度
fadeTO()([speed],0,[easing],[fn]);//s,0必须要写
$("div").fadeTo(1000,0.5);
显示参数
- 参数都可以省略，无动画直接显示。
- speed:三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时长的毫秒数值
- easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear"
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次
- opacity:透明度必须写，取值0-1之间
自定义动画animate
//语法
animate（params,[speed],[easing],[fn]);
//参数
//params:想要更改样式属性，以对象的形式传递，必写。
解决排队问 题
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
stop().什么发生排队的事件;//需在动画或者效果之前添加
五.JQuery属性操作
设置获取元素的固有属性prop()
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type
//获取属性
prop("属性")
//设置属性语法
prop("属性"，"属性值")
设置或获取元素的自定义属性值attr()
//获取属性
attr("属性")
//设置属性语法
attr("属性"，"属性值")
数据缓存data()
data（）方法可以值指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
//可以在指定的元素上缓存数据
data()
六.JQuery内容文本值获取
普通元素内容html()
//获取元素内容
html()
//设置元素内容
html("内容")
普通元素文本内容text()
//获取元素内容
text();//不加标签
//设置元素内容
text("内容");
获取设置表单值
获取设置表单值val("内容")
截取字符串
substr();
保留小数
toFixed(保留几位填几位);
七.JQuery元素操作
遍历元素
//语法一：
$("div".each(function(index,domEle){xxx;}));
//语法二：
$.each(object,function(index,element){xxx;});//可以用于遍历任何对象
index//索引
domEle//对象
取整
parseInt();
parseFloat();//保留浮点数
创建元素
//创建元素
var li =$("<li>xxx</li>");
//(1.内部添加)//生成后为父子关系
append();//内部添加，放入到匹配元素内部最后面
prepend();//内部添加并且放到内容的最前面
//(2.外部添加)//生成后为兄弟关系
after();//把内容放到目标元素后面
before();//把内容放到目标元素前面
删除元素
remove();//直接删除匹配元素
empty();//删除匹配元素集合中所有子节点
html();//清空匹配的元素内容
八.jQuery事件
jQuery事件事件注册
//单个事件注册
//语法：
element.事件(function(){})
$("div").click(function(){事件处理程序});
事件语法
//on()方法在匹配元素上绑定一个或多个事件处理函数
//语法：
//element.on(events,[selector],fn);
//1.events:一个或多个用空格分隔的事件类型
//2.selector：元素的子元素选择器
//3.fn回调函数
//若多个事件处理程序相同可同时输写，中间用空格键隔开
$("div").on("a b",function(){
} );
事件委派
//例子：
$("ul").on("click","li",function(){xxx});
//click是绑定在ul身上的， 但是 触发的对象是 ul 内的 li
可以给未来动态创建的元素绑定事件
$("ol").on("click","li",function(){
alert(li);
})
var li = $("<li>后来创建<li>");
$("ol").append(li);
事件处理off()解绑事件
off();//可以移除通过On()方法添加的事件处理程序
off("内容");//可以移除其内容的事件
off("" "");//解绑事件委托
one();//仅触发一次事件
自动触发事件trigger()
//方式一：
click();//元素.事件()//会触发元素的默认行为
//方式二：
元素.trigger("事件");//会触发元素的默认行为
//方式三：
元素.triggerHandler("click");//不会触发元素的默认行为
jQuery事件对象（有事件被触发就会有事件对象的产生）
elment.on(events,[selectior],function(event){});
event.preventDefault();//或者return false//阻止默认行为
event.stopPropagation();//阻止冒泡
jQyery内其他方法
//拷贝对象
$.extend([deep],target.object1,[objectN])//拷贝后会覆盖之前的内容
1.deep:
如果设为true为深拷贝//将其数据完全复制一份给目标对象，若里面有不冲突的属性，则会合并在一起
默认为false浅拷贝//把原来对象里面的复杂数据类型地址拷贝给目标对象
2.target：要拷贝的目标对象
3.object1：待拷贝到第一个对象的对象
九.其它
多库共存
//如果`$`符号冲突 我们可以使用jQuery
//让jQuery释放对`$`的控制权 ：
var 自定义 = jQuery.noConflict();
插件
jQuery之家
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
