Web前端： JQuery最强总结（每个要点都附带完全案例 详细代码！）

2021-4-1    前端达人

Web前端基础：

Web前端工具：

JQuery最强总结

概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • A JAX
  • Utilities

提示: 除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

知识框架

在这里插入图片描述

安装

版本问题

jQuery版本有很多，分为1.x 2.x 3.x
1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本:不兼容IE678，更加的精简(在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678)
国内多数网站还在使用1.x的版本

该总结中所用版本为1.1的版本

下载

jQuery有两个版本: 

生成环境使用的和开发测试环境使用的。 
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发(未压缩，是可读的代码) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

以上两个版本都可以从 jquery.com 中下载。

这里给个国内的下载地址：
JQuery 下载

jQuery的使用

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的 外部JavaScript脚本文件一样的语法。 

//将第一步中下载好的jQuery资源包进行解压，然后就可以饮用解压好的.js文件 <head> <script src="jquery-1.11.1.js"></script> </head>了。 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

jQuery语法结构 

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作(actions) 

    

    
  • 
        1
    
    •

基础语法 

$(selector).action() 说明:美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 
    jQuery 的 action() 执行对元素的操作 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法一： 

$(function(){ // 开始写 jQuery 代码... }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

写法二： 

$(document).ready(function(){ // 开始写 jQuery 代码... }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

jQuery的ready方法与JavaScript中的onload相似，但是也有区别 :

区别 window.onload $(document).ready()
执行次数 只能执行一次，如果执行第二次，第一次的执行会被覆盖 可用执行多次，不会覆盖之前的执行
执行时机 必须等待网易全部加载挖完毕(包括图片等)，然后再执行包裹的代码 只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码
简写方式 无 $(function(){ });

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

元素/标签选择器

Query 元素选择器基于元素/标签名选取元素。
语法:$("标签名称") 

<div>div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript" src="js/jquery-1.11.1.js" > <script> //文档就绪事件:  $(document).ready(function(){ //编写jQuery  }); $(function(){ //1、标签选择器: //获取所有的div元素(集合) var divList=$("div"); console.log(divList);//jQuery的对象  console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的对象  //将js对象转换为jQuery的对象  console.log($(divList[i])); } }); </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    •

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#p1")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素
$(".mydiv")

全局选择器

匹配所有元素
$("*")

并集选择器

将每一个选择器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")

后代选择器

在给定的祖先元素下匹配所有的后代元素
$("form input"

子选择器

在给定的父元素下匹配所有的子元素
$("form > input")

相邻选择器

匹配所有紧接在 prev 元素后的 next 元素
$("label + input")

同辈选择器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

属性选择器

jQuery中的事件 

页面对不同访问者的响应叫做事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

常用DOM事件列表

鼠标事件 键盘事件 事件 文档/窗口事件
click keydown submit load
dblclick keyup change
mouseover focus
mouseout blur
hover

常用的 jQuery 事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法


转自：csdn论坛


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« CDEC中国数字智能生态大会的品牌视觉形象 炫酷大数据可视化界面设计赏析（十二） »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档