如鹏网学习笔记JQuery

Posted 2020-10-03 半路和尚

一、jQuery简介

　　jQuery是一个javascript库，特性丰富，包含若干对象和很多函数，可以替代传统DOM编程的操作方式和操作风格

　　jQuery通过对DOM API、DOM事件的封装，提供了一套全新的API，更简单和灵活

　　jQuery宗旨：write less，do more。

　　jQuery解决了不同浏览器之间的兼容性问题，不用考虑兼容性

　　示例代码：

　　　　<script type="text/javascript" src="引入的jQuery库的地址"></script> //引入要使用的jQuery文件
　　　　<script type="text/javascript">
　　　　//使用document对象的ready函数
　　　　　　$(document).ready(function(){
　　　　　　　　$("div").css("backgroundColor","lightgray");//使用div对象的css函数
　　　　　　});
　　　　</script>

二、$对象、jQuery对象

　　和DOM编程的入口是document对象一样，jQuery编程的入口是$对象，它是jQuery的核心对象

　　$对象也是一个函数对象，可以使用$()的形式调用它，传递给$()不同的参数可以做不同的操作

　　$函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象

　　变量命名规则：$对象在变量前面加上$！！！！

　　$对象：
　　　　1，$函数可以直接把DOM对象包装成jQuery对象，或者通过选择器
　　　　　　示例代码：
　　　　　　var divs = document.getElementsByTagName("div");
　　　　　　alert(divs);//打印出的是divs对象
　　　　2，DOM对象支持属性操作和方法操作，jQuery对象一般只进行方法操作

　　　　3，jQuery对象不能再调用DOM对象的方法，DOM对象也不能调用jQuery对象的方法

　　jQuery对象：
　　　　1，jQuery对象本质上是数组对象，把DOM对象作为数组元素

　　　　2，jQuery对象的很多方法具有隐式迭代特性，即方法内部会迭代遍历所有元素，把方法的效果应用到每一个元素上

三、文档加载完成事件

　　第一种全写形式：

　　　　$(document).ready(function(){ });

　　　　示例代码：
　　　　　　//第一种写法：
　　　　　　//1，将document对象传递给$()函数
　　　　　　//2，调用$(document)对象的ready()函数，并传入一个事件处理函数function(){}
　　　　　　$(document).ready(function(){
　　　　　　　　alert("");
　　　　　　});

　　第二种写法：
　　　　示例代码：
　　　　　　//将事件处理函数function(){}直接传递给$()函数，是第一种方式的简写，效果一样
　　　　　　$(function(){
　　　　　　　　alert("");
　　　　　　});

四、jQuery选择器

　　1，jQuery的编程思路和DOM一样：
　　　　先获得要操作的元素，然后再操作该元素

　　2，为了方便获取元素，jQuery直接复制了CSS选择器语法。另外除了伪类选择器外大部分和CSS选择器相同

　　3，jQuery选择器有：
　　　　标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器

　　4，属性选择器：通过元素的属性进行选择
　　　　[元素属性] 选择有该属性的元素

　　　　[属性名=属性值] 　　 选择对应属性值的元素

　　　　[属性名^=部分属性值] 　　 选择以部分属性名开头的元素

　　　　[属性名$=部分属性值] 　　 选择以部分属性名结尾的元素

　　　　[属性名*=部分属性名] 　　 选择包含部分属性名的元素

　　　　[attr]　　选择有attr属性的元素
　　　　[attr=val]　　 选择以attr属性值为val的元素
　　　　[attr^=val]　　 选择以attr属性值以val开头的元素
　　　　[attr$=val]　　 选择以attr属性值以val结尾的元素
　　　　[attr*=val]　　 选择以attr属性值中包含val的元素

　　5，伪类选择器：与属性选择器配合，筛选其中的元素

　　　　:first 第一个元素
　　　　:last 最后一个元素
　　　　:even 第偶数个元素
　　　　:odd 第奇数个元素
　　　　重点：
　　　　　　:eq(index) 第index个元素
　　　　　　:gt(index) 第index之后的元素
　　　　　　:lt(index) 第index之前的元素
　　　　　　:not(选择器名称) 对括号里的选择器取反的元素
　　　　　　:first-child 第一个子元素
　　　　　　:last-child 最后一个子元素
　　　　　　:nth-child(n) 第n个子元素

　　　　示例代码：
　　　　<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
　　　　<script type="text/javascript">
　　　　　　$(document).ready(function () {
　　　　　　//标签选择器
　　　　　　$("div").css("backgroundColor","lightgreen");

　　　　　　//id选择器

　　　　　　$("#div02").css("backgroundColor","red");

　　　　　　//类选择器
　　　　　　$(".c03").css("backgroundColor","blue");

　　　　　　//属性选择器
　　　　　　$([id])

　　　　　　});
　　　　</script>

　　　　语法：
　　　　　　$("选择器名称")
　　　　　　$("选择器名称","")

　　6，复合选择器：选择器可以进行多种形式的组合

　　　　selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)

　　　　selector1>selector2 在1选中的元素中，使用2筛选其子元素

　　　　selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素

　　　　selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素

　　　　selector1,selector2 各个选择器的并集

　　　　selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）

五、隐式迭代和显式迭代

　　迭代，可以理解为数组对象的遍历。
　　隐式迭代就是默认情况下，对数组对象中所有对象遍历后的效果
　　显式迭代就是jQuery对象的each()方法，按照循环的方式，主动选择其中对象，进行操作



　　隐式迭代示例代码：
　　　　$(document).ready(function(){
　　　　　　//此操作会将所有div全部设置成lightgray，称之为隐式迭代
　　　　　　$("div").css("backgroundColor","lightgray");
　　　　});

　　显式迭代示例代码：
　　　　$(document).ready(function(){
　　　　　　$("div").each(function(index,domElement){
　　　　　　　　//遍历所有元素
　　　　　　　　alert(index+"+"+domElement);
　　　　　　　　//选择遍历
　　　　　　　　if(index ==0){
　　　　　　　　　　domElement.style.backgroundColor="lightgray";
　　　　　　　　}else if(index==1){
　　　　　　　　　　domElement.style.backgroundColor="lightblue";
　　　　　　　　}else if(index==2){
　　　　　　　　　　domElement.style.backgroundColor="red";
　　　　　　　　}else{
　　　　　　　　　　domElement.style.backgroundColor="black";
　　　　　　　　}
　　　　　　});
　　　　});

六、jQuery操作元素属性

　　使用attr()函数来进行操作
　　三种方式：
　　　　1，attr(attrName)　　 获取第一个元素的该属性的值

　　　　2，attr(attrName,value) 　　 设置所有元素的该属性的值（先为所有元素增加该属性，然后赋值）

　　　　3，attr(attrName,function(index,value){ }) 　　设置所有元素该属性的值，值由函数的返回值决定，index表示元素的索引，value表示该元素的原值

　　示例代码：
　　　　<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
　　　　<script type="text/javascript">
　　　　　　$(document).ready(function () {
　　　　　　//传入一个参数，获取div元素的id属性的值，但是只能获取第一个，没有发生隐式迭代
　　　　　　　　var value = $("div").attr("id");

　　　　　　　　//传入两个参数，设置所有元素的属性的值
　　　　　　　　$("div").attr("class","xx");

　　　　　　　　//传入两个参数，第二个参数为一个函数，返回值决定了第二个参数的值
　　　　　　　　$("div").attr("xxx", function (index,value) {
　　　　　　　　　　return "c"+index;
　　　　　　　　})
　　　　　　});
　　　　</script>

　　attr()函数对html元素固有的属性和自定义属性都有效，但是对于类似复选框的checked属性，一级元素的5个只读属性无效

　　需要使用jQuery对象的prop()函数来操作，但是prop()函数对自定义属性无效


七、jQuery操作元素的CSS样式

　　操作元素的style属性：

　　　　css(propName); 　　 获取当前的样式属性的值
　　　　css(propName,value);　　 给propName属性赋值
　　　　css(propName,function(index,value){ }); 　　 给propName属性赋值，函数的返回值决定赋值的值


　　操作元素的class属性：
　　　　addClass(class) 　　 增加class属性的值
　　　　removeClass(class) 　　 去除class属性的值
　　　　toggleClass(class) 　　 切换class(如果存在就删除，如果不存在就添加)


　　也可以使用attr()函数来操作style属性和class属性，但是会出现覆盖的情况


八、操作元素的文本内容、子节点、元素值

　　html() 获取第一个元素的HTML内容(包括子元素和文本内容)

　　html(string) 设置所有元素的HTML内容 效果等于DOM对象的innerHTML属性

　　val() 获取第一个元素的value属性的值(如果有value属性的话，没有就是空字符串)

　　val(string) 设置所有元素的value属性的值


九、操作元素节点

　　$(html)　　 创建元素节点

　　append(content)　　 插入子节点

　　before(content)　　 插入兄弟节点

　　remove()　　 删除元素自己

　　children()　　 获得元素的子元素

　　parent()　　 获得元素的父元素

　　prevall()　　 获得元素之前的兄弟元素

　　nextall()　　 获得元素之后的兄弟元素

　　siblings()　　 获得兄弟元素


十、jQuery事件处理

　　jQuery提供了一系列如click(),focus(),mouseover()等方法，给元素注册对应事件处理函数

　　示例代码：
　　　　$("div").click(function(){
　　　　　　alert(‘xx‘)

　　　　});//给所有的div元素的点击事件注册了处理函数
　　重点：

　　　　1，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，不必等到页面的图片等资源也加载完成

　　　　2，这些函数都可以多次使用。不会发生覆盖

十一、$(this)的使用

　　因为jQuery的隐式迭代特性，使用jQuery注册的时间处理函数中的this实际上是DOM对象，因此可以调用DOM API，也可以使用$(this)调用jQuery API

　　示例代码：
　　　　$(document).ready(function(){
　　　　　　$("div").click(function(){
　　　　　　　　alert(this);//这里的this是div对象
　　　　　　});
　　　　});

十二、链式编程

　　更优雅、可以对一个jQuery对象实现一组操作

　　为了支持链式编程，大部分jQuery方法的返回值还是此jQuery对象本身
　　如：$("div").mouseout().click();//始终是对div对象进行操作

　　如果jQuery方法返回的不是原来的对象，就会发生“断链”。这时使用end()方法返回断链之前的状态
　　如：$("#div01").siblings().html("other").end().html("div01");//接回之前的状态

　　但是如果返回值不是jQuery对象的方法，就没法接上了
　　如：$("div").html();//返回值是字符串，不是原来的div对象了

十三、jQuery动画效果
　　//time的单位是毫秒
　　hide(time,function(){
　　　　$("div").show(time);//在time时间内发生function函数的事件
　　});

　　show(time,function) 是元素在指定事件内渐渐展开