博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
Jquery教程(更新中)
阅读量：3960 次
发布时间：2019-05-24

本文共 6292 字，大约阅读时间需要 20 分钟。

Jquery教程

一.Jquery基础

1.概念

一个JavaScript框架。简化JS开发,jQuery是一个快速、简洁的JavaScript框架。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

要使用Jquery需要导入文件，获取方式:

链接：https://pan.baidu.com/s/1fdCBmse_afSnlbl2rj8eOQ

提取码：b942

下面我们先来做一个演示

    
       Jquery演示    
   
    一
   
   
    二

在这里插入图片描述

2.Jquery对象与JS对象的区别与转换

I.案例分析找区别

例子1

    
       Jquery演示    
   
    一
   
   
    二

在这里插入图片描述

这个例子说明jquery对象与JS对象都可以当做数组来使用
例子2

    
       Jquery演示    
   
    一
   
   
    二

在这里插入图片描述

    
       Jquery演示    
   
    一
   
   
    二

在这里插入图片描述

这个例子我们发现Jquery对象与Js对象相比而言操作更加方便。
总结:

1. JQuery对象在操作时，更加方便。2. JQuery对象和js对象方法不通用的(这一点在上面例子没有体现，读者可以自行演示)

II.相互转换

由于JQuery对象与Js对象的方法不通用,但是有时候我们需要用到另一边的方法，这时就需要转化了。转换方式为:

1.jq -- > js : jq对象[索引] 或者 jq对象.get(索引)2.js -- > jq : $(js对象)

例子:

    
       Jquery演示    
   
    一
   
   
    二

在这里插入图片描述

3.Jquery事件绑定与入口函数

我们看下面的写法:

这样做不会弹出来"111",这是因为函数写在button上面,而button还未被加载，此时函数获取不到button对象,因此我们添加入口函数(作用在于等页面加载完才会去执行方法)来解决即可。

js方式：

jquery方式

两种方式的区别:window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉$(function)可以定义多次的。

4.样式控制

   
    jack

在这里插入图片描述

二.Jquery选择器

1. 基本选择器

1. 标签选择器（元素选择器）* 语法： $("html标签名") 获得所有匹配标签名称的元素2. id选择器 * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素3. 类选择器* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素4. 并集选择器：* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

例子1:标签选择器(元素选择器)

    
   
    aaa

在这里插入图片描述

上面这里aaa变为aa是由于浏览器中英文自动翻译导致的(下同)。
例子2:id选择器

    
   
    aaa

在这里插入图片描述

例子3:类选择器

    
   
    aaa

在这里插入图片描述

例子4:并集选择器

   
    aaa

在这里插入图片描述

上面这里只弹了一次,说明我们的divs只有一个元素。

   
    aaa
   
   
    bbb
   
   
    ccc

在这里插入图片描述

2. 层级选择器

1. 后代选择器* 语法： $("A B ") 选择A元素内部的所有B元素		2. 子选择器* 语法： $("A > B") 选择A元素内部的所有B子元素

我们画个图解更好理解:

在这里插入图片描述

div1 span :表示span1,span2,span3都被选中div1 > span:表示只有span1,span2都被选中

例子1:后代选择器

   
    
    span1    
            span2        span3

在这里插入图片描述

例子2:子选择器

   
    
    span1    
            span2        span3

在这里插入图片描述

3. 属性选择器

1. 属性名称选择器 * 语法： $("A[属性名]") 包含指定属性的选择器2. 属性选择器* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器3. 复合属性选择器* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器

例子1. 属性名称选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

上面这里1变为1个是由于浏览器中英文自动翻译导致的(下同)。
例子2. 属性选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子3. 复合属性选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

4. 过滤选择器

1. 首元素选择器 * 语法： :first 获得选择的元素中的第一个元素2. 尾元素选择器 * 语法： :last 获得选择的元素中的最后一个元素3. 非元素选择器* 语法： :not(selector) 不包括指定内容的元素4. 偶数选择器* 语法： :even 偶数，从 0 开始计数5. 奇数选择器* 语法： :odd 奇数，从 0 开始计数6. 等于索引选择器* 语法： :eq(index) 指定索引元素7. 大于索引选择器 * 语法： :gt(index) 大于指定索引元素8. 小于索引选择器 * 语法： :lt(index) 小于指定索引元素9. 标题选择器* 语法： :header 获得标题（h1~h6）元素，固定写法

注意:冒号":"左右两边需要紧挨着其左右两边字母

例子1. 首元素选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子2. 尾元素选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子3. 非元素选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子4. 偶数选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子5. 奇数选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子6. 等于索引选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子7. 大于索引选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子8. 小于索引选择器

   
    1
   
   
    2
   
   
    3

在这里插入图片描述

例子9. 标题选择器

1
2
3

在这里插入图片描述

5. 表单过滤选择器

1. 可用元素选择器 * 语法： :enabled 获得可用元素2. 不可用元素选择器 * 语法： :disabled 获得不可用元素3. 选中选择器(单选/复选框)* 语法： :checked 获得单选/复选框选中的元素4. 选中选择器(下拉框)* 语法： :selected 获得下拉框选中的元素

注意:冒号":"左右两边需要紧挨着其左右两边字母

例子1. 可用元素选择器

在这里插入图片描述

例子2. 不可用元素选择器

在这里插入图片描述

例子3. 选中选择器(单选/复选框)

打球:游泳:

在这里插入图片描述

例子4.选中选择器(下拉框)

上面option标签的value属性其实不写也可以。

在这里插入图片描述

6.DOM操作

I. 内容操作

1. html(): 获取/设置元素的标签体内容	内容  --> 内容2. text(): 获取/设置元素的标签体纯文本内容	内容 --> 内容3. val()： 获取/设置元素的value属性值

例子1. html()

font1    font2

在这里插入图片描述

例子2. text()

font1    font2

在这里插入图片描述

例子3. val()
前面已经多次使用过，这里不演示。

II. 属性操作

1. 通用属性操作

1. attr(): 获取/设置元素的属性2. removeAttr():删除属性3. prop():获取/设置元素的属性4. removeProp():删除属性

例子1. attr()

   
    abc

在这里插入图片描述

例子2. removeAttr()

   
    abc

在这里插入图片描述

例子3. prop()

   
    abc

在这里插入图片描述

例子4. removeProp()

   
    abc

在这里插入图片描述

从上面的操作我们发现会出现undefined的结果，那么关于两者的区别:

1. 如果操作的是元素的固有属性，则建议使用prop2. 如果操作的是元素自定义的属性，则建议使用attr

2. 对class属性操作

1. addClass():添加class属性值2. removeClass():删除class属性值3. toggleClass():切换class属性注意:toggleClass("one"),判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加4. css():

例子1. addClass()

div id="div">abc

在这里插入图片描述

例子2. removeClass()

div id="div" class="m">abc

在这里插入图片描述

例子3. toggleClass()

   
    abc

在这里插入图片描述

   
    abc

在这里插入图片描述

例子4. css()
前面讲过。

3. CRUD操作

1. append():父元素将子元素追加到末尾* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾2. prepend():父元素将子元素追加到开头	* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头3. appendTo():	* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾4. prependTo()：	* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头5. after():添加元素到元素后边	* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系6. before():添加元素到元素前边	* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系7. insertAfter()	* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系8. insertBefore()	* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系9. remove():移除元素	* 对象.remove():将对象删除掉10. empty():清空元素的所有后代元素。	* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

这里我仅仅举几个例子即可，大同小异，其他的可以自己演示,这是测试的样例。

    
       Jquery演示        
   
    div1
   
   
    div2    
    
     div3

例子1. append()

点击第一个按钮:
例子2. after()
点击第二个按钮:
在这里插入图片描述

三.Jquery动画与遍历

I.动画

1.默认显示和隐藏方式:			1. show([speed,[easing],[fn]])			2. hide([speed,[easing],[fn]])			3. toggle([speed],[easing],[fn])2. 滑动显示和隐藏方式			1. slideDown([speed],[easing],[fn])			2. slideUp([speed,[easing],[fn]])			3. slideToggle([speed],[easing],[fn])3. 淡入淡出显示和隐藏方式			1. fadeIn([speed],[easing],[fn])			2. fadeOut([speed],[easing],[fn])			3. fadeToggle([speed,[easing],[fn]])

参数说明如下:

1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"	* swing：动画执行时效果是 先慢，中间快，最后又慢	* linear：动画执行时速度是匀速的3. fn：在动画完成时执行的函数，每个元素执行一次。

1.默认显示和隐藏方式

    
       Insert title here    
   
        div显示和隐藏

在这里插入图片描述

2. 滑动显示和隐藏方式

    
       Insert title here    
   
        div显示和隐藏

在这里插入图片描述

3. 淡入淡出显示和隐藏方式

    
       Insert title here    
   
        div显示和隐藏

在这里插入图片描述

II.遍历

1. js的遍历方式		* for(初始化值;循环结束条件;步长)2. jq的遍历方式	1. jq对象.each(callback)		1. 语法：			jquery对象.each(function(index,element){
   });				* index:就是元素在集合中的索引				* element：就是集合中的每一个元素对象				* this：集合中的每一个元素对象		2. 回调函数返回值：			* true:如果当前function返回为false，则结束循环(break)。			* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)	2. $.each(object, [callback])	3. for..of: jquery 3.0 版本之后提供的方式		for(元素对象 of 容器对象)

1. js的遍历方式

    
               
   
        
        
  • 北京
    •     
        
  • 上海
    •     
        
  • 天津
    •     
        
  • 重庆
    •

在这里插入图片描述

2.jq对象.each(callback)
案例1

    
               
   
        
        
  • 北京
    •     
        
  • 上海
    •     
        
  • 天津
    •     
        
  • 重庆
    •

在这里插入图片描述

案例2

    
               
   
        
        
  • 北京
    •     
        
  • 上海
    •     
        
  • 天津
    •     
        
  • 重庆
    •

在这里插入图片描述

3.$.each(object,[callback])(这里的object可以是jq对象或者js对象)

四.Jquery事件绑定与切换

五.补充

转载地址：http://txlzi.baihongyu.com/

你可能感兴趣的文章
私有继承中的派生类对象与基类对象间的转换
查看>>
5.7 观察者模式observer（行为模式）
查看>>
建造者模式Builder（创建模式）
查看>>
Linux文件系统目录结构的详细解说(一)
查看>>
TIME_WAIT状态的意义
查看>>
千万不要把 bool 设计成函数参数
查看>>
linux文件属性及权限详解
查看>>
Find 命令使用详解
查看>>
Ext4,Ext3的特点和区别
查看>>
Linux文件系统目录结构的详细解说(二)
查看>>
Linux umount 报 device is busy 的处理方法
查看>>
一个大小为n的数组，里面的数都属于范围[0, n-1]，有不确定的重复元素，找到至少一个重复元素，要求O(1)空间和O(n)时间。
查看>>
提供机制而不是策略
查看>>
内核中断机制
查看>>
内核抢占
查看>>
编译linux内核源码 ubuntu
查看>>
epoll使用详解
查看>>
epoll
查看>>
The AnimationClip 'Walk' used by the Animation component 'Pig' must be marked as Legacy.
查看>>
《Linux内核设计与实现》- Linux的进程
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-18 23:15:05   当前IP: 18.119.160.95   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我