第九章：关于Jquery库

最新推荐文章于 2020-08-06 11:46:27 发布

miao蛙种子

最新推荐文章于 2020-08-06 11:46:27 发布

阅读量377

点赞数

分类专栏： HTML之旅

本文链接：https://blog.csdn.net/xiangchi7/article/details/84642179

版权

文章目录

第一节：了解Jquery
第二节：jQuery使用案例
第三节：动画效果
第四节：轮播图
- - ==什么是轮播图==
  - ==制作轮播图==
第五节：ajax

第一节：了解Jquery

原生的JS代码的编写量非常多，且获取DOM节点并对元素进行操作也比较繁琐，为了简化，jQuery开始诞生。
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的支持多浏览器的JavaScript代码库（或JavaScript框架）。jQuery即倡导写更少的代码，做更多的事情。“write Less，Do More”.它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。在2006年1月由美国人John Resig在纽约的barcamp发布。
jQuery官方网站可点击此处链接

jQuery版本介绍

1.x.x
兼容低版本浏览器IE8-
代码过于庞杂，性能不高
最新版本1.12
2.x.x
已经不支持IE低版本浏览器IE8-
最新版本2.2
3.x.x
3.0 版本是从 2.0 版本分支出来的，但由于改动过大，因此更新了主版本号
不支持IE低版本浏览器
性能大幅度提高（推荐使用）

jQuery下载与安装

1、官网下载地址可点击此处链接
2、CDN下载地址可点击此处链接
3、CDN.min版下载地址可点击此处链接

jQuery文档（API说明书）

jQuery库封装了很多方法，更详细的说明和使用方法，可以在jQuery文档中进行查询。jQuery文档有在线版和文件版。在线版速查起来更方便些，在线链接非常多，很多网页都有
在这里插入图片描述

在线版jQuery文档在线链接

jQuery文档在线连接1可点击此处
 jQuery文档在线连接2可点击此处
 jQuery文档在线连接3可点击此处

jQuery的使用

jQueuy只做两件事情
【获取元素】 使用jQuery选择器获取元素，jQuery选择器支待CSS，还有自己私有的选择器
【操作元素】 使用jQuery操作,可操作属性、内容、样式、动画、事件等

引入jQuery

<script src="lib/jquery-3.2.1.js"></script>

jQuery的牛刀小试（获取元素）

jQuery('selector') ——获取元素
jQuery(function(){ }) —— 替代window.onload
$ —— jQuery的别名
即：$() ==jQuery(),为了编写的规范和安全性，$()最好只在function()内部才写

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>引入jquery</title>
        <script src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function(){
    
                var $box = jQuery('.box');
                console.log($box);               
            })
        </script>
    </head>
    <body> 
        <div class="box"></div>
    </body>
</html>

控制台结果：
在这里插入图片描述

常用jQuery原型对象的方法介绍

写在jQuery原型对象中的方法，通过jQuery实例调用

【修改元素style属性】
css(attr[,val]): （内联样式）
取值：
css(attr),css([‘color’,’text-align’]) <==> getComputedStyle[attr]
赋值：
css(attr,val),css({attr:val});

【获取/设置匹配表单元素的值（等同于原生js中的value属性）】
val(v) :
取值：
input.val()
赋值：
input.val(v)
v:字符串
v:数组（一般用于单选/复选框的勾选）
v:函数function(idx,val){ return 值}//函数内部一定要返回值

【原生js中的innerHTML】
html() : （等同于）
取值
div.html() ——取得第一个匹配元素的html内容
赋值
div.html(‘:’) ——设置匹配元素的内容

【文本内容】
text() ——取得所有匹配元素的文本内容。
【添加/删除类】
addClass()/removeClass(): 添加/删除类,支持多个类同时添加或删除
toggleClass() ——如果存在（不存在）就删除（添加）类。
hasClass(‘con’) ——判断当前元素是否包含con这个类，返回布尔值（不支持多个类进行判断）

【获取jquery对象】
eq(n) ——获取第N个jquery对象（元素）,n支持负数（表示从后面查找）

**【获取当前元素在同辈元素中的索引值】
index() ——获取当前元素在同辈元素中的索引值
$(this).index();

【显示/隐藏】
show() ——显示元素
hide() ——隐藏元素
带参数：同时改变width,height,opacity的动画

【检测匹配元素集合】
is(expr|obj|ele|fn) ——根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，其中如果有一个元素符合这个给定的选择器表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。

【获取html标签属性】
attr(name[,val]) ——设置/获取html标签属性

【获取DOM节点属性】
prop(attr[,val]) 获取/设置DOM节点属性（一般修改布尔类型属性）
获取：获取在匹配的元素集中的第一个元素的属性值。
赋值：给集合中所有元素属性赋值
val为函数
$(':checkbox').prop('checked',function(idx,oldVal){
return !oldVal;
}

【遍历jquery对象】
each(function(idx,ele){}) ——用于遍历jquery对象
return true ——跳过当前循环，进入下一个循环（等效原生js中得continue）
return false ——退出整个each循环（等效原生js中得break）

【jquery大部分方法的共性】
无参数时为取值，带参数时为赋值
取值：取得第一个匹配元素的值
赋值：设置所有匹配元素的值
隐式迭代（隐式遍历）：看不见的遍历，大部分的jquery方法都支持隐式迭代

常用jQuery静态方法介绍

$.each(arr|obj,callback) ——通用遍历方法，用于遍历对象和数组。
callback(idx,item)
$.map(arr|obj,callback) ——根据现有数组生成一个新的数组，新数组的元素为callback内return的值
callback(item,idx)
$.type(n) ——检测参数n的数据类型
$.makeArray(obj) ——将类数组对象转换为数组。
$.parseJSON(json) ——接受一个JSON字符串，返回解析后的对象。类似原生js中的JSON.parse
$.inArray(value,array,[fromIndex]) ——确定value在数组array中的位置，从0开始计数(如果没有找到则返回 -1 )，一般用于判断数组中是否包含某一字符。
serialize()/serializeArray() ——只能在form表单中使用，并且表单元素必须有name属性

选择器介绍

常用的选择器

【作用】
选择页面中的元素，得到jQuery实例对象

【ID选择器】
$(“#save”) ——ID选择器
【类选择器】
$(“.class”) ——类选择器
【标签选择器】
$(“div”) ——标签选择器
【复合选择器】
$(“div,span,p.myClass”) ——复合选择器
【属性选择器】
$(‘[id=box]’) ——属性选择器
$(‘li[data-index]’) ——获取有data-index属性的所有元素
$(‘li[data-index!=10]’) ——data-index属性不等于10的元素,css目前未支持
$(‘li[data-index^=10]’) ——data-index属性以10开头的元素
$(‘li[data-index$=10]’) ——data-index属性以10结尾的元素
$(‘li[data-index*=10]’) ——data-index属性包含10的元素
【表单选择器】
$(‘:input’)
:radio ——匹配所有单选按钮
:checkbox ——匹配所有复选按钮
:selected ——获取已选择的option元素
:checked ——匹配所有被选中的元素(复选框、单选框等，select中的option)
:submit ——匹配所有提交按钮
:reset ——匹配所有重置按钮
:button ——匹配所有按钮
:text ——匹配所有的单行文本框
:password ——匹配所有密码框
【可见性】
:hidden ——匹配所有不可见元素(display:none)，或者type为hidden的元素
:visible ——匹配所有可见元素
以上两个选择器配合is()方法通常用于判断，返回布尔值
if(box.is(':visible')){
box.css('display','none');
}

选择器的常用操作

【jquery对象与原生对象的转换】
jquery转原生:
get(0)/[0] ——获取集合中第一个DOM节点
get() ——不传参得到集合中所有的dom节点
原生转
jquery: $(dom);

【判断是否为jquery对象】
var box = $('#box');
if(box.jquery){
.....
}

【判断一个jquery对象是否存在(是否能获取到元素)】
length
转成原生对象再判断

筛选

利用选择器得到得结果不一定是我们想要得最终结果，有时需要进一步筛选
【基本筛选】
:odd/:even,:gt(n)/:lt(n) ——筛选范围（索引支持负数）
:contains(奥巴马) ——筛选出包含“奥巴马”这三个字的元素

【筛选方法】
first()/last() ——获取集合中第一个/最后一个元素
eq(index|-index) ——获取第N个元素,n支持负数（表示从后面查找）
filter(expr|obj|ele|fn) ——筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配* 的范围。用逗号分隔多个表达式
map(fn) ——将一组元素转换成其他数组（不论是否是元素数组）
slice(start,[end]) ——选取一个从start到end(不包括end)匹配的子集
has(expr|ele) —— 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn) —— 删除与指定表达式匹配的元素

查找

利用当前元素去查找其他元素
【查找子元素】
find(expr|obj|ele) —— 查找后代元素
children([expr]) —— 取得匹配元素的所有子元素。(原生js:children)

【查找父级元素】
parent([expr]) —— 获取父元素
parents([expr]) —— 取得所有父级元素
closest(expr|obj|ele) —— 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
offsetParent() —— 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如果没有定位父级，则返回html元素

【查找兄弟元素】
next([expr]) —— 返回下一个同辈元素 ==> nextElementSibling
prev([expr]) —— 获取前一个同辈元素 ==> previousElementSibling
nextAll([expr]) —— 获取当前元素之后所有的同辈元素
prevAll([expr]) —— 获取当前元素之前所有的同辈元素
siblings([expr]) —— 获取当前元素的所有兄弟元素（除自身以外的所有兄弟元素 = * prevAll + nextAll）

DOM节点操作介绍

增删改

【创建jquery对象】
$('<div/>');
$('<div>生成一个div</div>');

【元素添加】
1、内部添加（添加为子元素）
append(content|obj|ele|fn): 在元素内部最后面追加内容（后置）
prepend: 向元素内部增加内容（前置）
appendTo,prependTo
2、外部插入内容（添加为兄弟元素）
after: 在元素后面插入内容
before: 在元素前面插入内容
insertAfter,insertBefore
如果页面上已经存在了要添加的元素，append,prepend,after,before会把元素移动到页面相应的位置

【元素删除】
remove(); 删除元素, 虽然元素从文档中删除了，但js内部依然保留对它引用
empty(); 清空内容

【元素复制】
clone([Event[,deepEvent]])
Event：（true 或 false）是否复制元素的行为，默认为false
deepEvent: （true 或 false）是否复制子元素的行为，默认为Even的值

盒模型属性

.offset():获取匹配元素相对于根元素的偏移量
返回一个对象，包含当前元素的top,left值
position():获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。
width(v) = width; //取值/赋值,当传入v时，相当于css(‘width’,v);
innerWidth() = width + padding; -----> clientWidth
outerWidth() = width + padding + border; -------> offsetWidth
outerWidth(true) = width + padding + border + margin;

第二节：jQuery使用案例

操作样式

例：jQuery选择器+CSS方法

<script type="text/javascript">
	jQuery(function(){
    
		//改变背景颜色
		$('.box').css('background-color','#58bc58')              
	})
</script>

操作事件

例：jQuery选择器+点击事件方法+CSS样式方法

<script type="text/javascript">
    jQuery(function($){
     
        $('.box').on('click',function(){
    
            $('.box').css('background-color','#58bc58')
        })
    })
</script>

浏览器结果：
在这里插入图片描述

操作内容

例：jQuery选择器+原型对象innerHTML的方法HTML()+CSS方法==

<script type="text/javascript">
    jQuery(function($){
     
        //
        $('.box').html('我是原来的innerHtml').css('font-size',30)   //链式调用
    })
</script>

浏览器结果：
在这里插入图片描述

DOM节点操作与HTML属性

DOM节点操作

prop(attr,val)

例：为多选框默认全部勾上

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery</title>
        <style type="text/css">
        </style>
        <script src="./lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
     
                $(':checkbox').prop('checked',true);
            })
        </script>
    </head>
    <body>

最低0.47元/天解锁文章

miao蛙种子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第九章：关于Jquery库

文章目录第一节：关于Jquery第一节：关于JqueryjQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery即倡导写更少的代码，做更多的事情。“write Less，Do More”.它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计...
复制链接

扫一扫