jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

等风来，不如追风去~~~

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量129

点赞数

分类专栏：前端知识库文章标签： jquery

本文链接：https://blog.csdn.net/qq_51174391/article/details/119493351

版权

前端知识库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery

需要了解的知识框架

在这里插入图片描述

1、jQuery对象

1.JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
jQuery库：里面存在着大量的JavaScript函数！！！是JavaScript世界中使用最广泛的一个库。使用JQuery将极大地提高编写JavaScript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅健壮。
江湖传言，全世界大约有80~90%的网站直接或间接地使用了jQuery。它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。
   Query 是一个 JavaScript 函数库。
   jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
2.jQuery的优点
- 提供强大的功能函数
- 解决浏览器兼容问题
- 实现丰富的UI和插件
- 纠正错误的脚本知识
3.jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
4.jQuery能帮我们干这些事情：
   消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
   简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
   轻松实现动画、修改CSS等各种操作。
   
jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！
官网：https://jquery.com/     
jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

5.使用/获取jQuery在页面的head中引入jQurey文件：
<html>
<head>    
    <script src="//code.jquery.com/jquery-1.11.3.min.js"</script>      
    ...
</head>
<body>

    <a id="test-link" href="#0">点我试试</a>
    
<script>    
    // 获取超链接的jQuery对象:    
    var a = $('#test-link');    
    a.on('click', function () {        
    alert('Hello!');   
    });
   // 方式二    
   a.click(function () {        
   alert('Hello!');   
   });
</script>
</body>
</html>

公式：$(selector).action()
美元符号定义jQuery选择符（selector）"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作

在这里插入图片描述

2、jQuery选择器

基本选择器
$("*") 选取页面所有元素
$("p,div") 选取p,div标签元素
$(".con")选取class="con"的元素
$("#one") 选取id="one"的元素
层次选择器
parent>child 选取直系子元素。
prev+next 选取下一个兄弟元素，相当于next();
prev~siblings 选取prev的所有兄弟元素，等同于nextAll();
基础过滤选择器
$("p:first") 选取匹配的第一个元素
$("p:last") 选取匹配的最后一个元素
$("p:not('div')")去除与给定选择器匹配的元素
$("tr:event")匹配索引值为偶数的元素，从0开始计数；
$("tr:odd") 匹配索引值为奇数的元素，从0开始计数；
$("tr:eq()")匹配一个给定索引值的元素，从0开始计数；
$("tr:gt(0)")匹配所有大于给定索引值的元素，从0开始计数；
$("tr:lt(0)")匹配所有小于给定索引值的元素，从0开始计数；
$(":header") 匹配如h1,h2,h3之类的标题元素；
内容过滤选择器
$("div:contains('hello')")匹配包含给定文本的元素；
$("td:empty")匹配所有不包含子元素或者文本的空元素；
$("div:has(p)")匹配含有选择器匹配的元素的元素；
$("td:parent")匹配含有子元素或者文本的元素；
属性过滤选择器
$("input[name='news']")匹配name=news的元素；
$("input[name!='news']")匹配name不等于news的元素；
$("input[name^='news']")匹配name值以news开头的元素；
$("input[name$='news']")匹配name值以news结尾的元素；
$("input[name*='news']")匹配name值包含news的元素；
$("input[id][name$='news']")匹配属性id,属性name以news结尾的元素
子元素过滤选择器
$("ul li:nth-child(2)")匹配其父元素下的第二个字元素;
$("ul li:first-child")匹配第一个子元素；
$("ul li:last-child")匹配最后一个子元素；
$("ul li:only-child")匹配某个父元素中唯一的子元素；
表单元素选择器
$(":input")匹配所有input,textarea,select,和button元素；
$("input:text")匹配所有的单行文本框；
$("input:password")匹配所有密码框；
$("input:checked")匹配所有被选中的元素；
$("input:radio")匹配所有单选按钮；
$("input:checkbox")匹配所有复选框；
$("input:submit")匹配所有提交按钮；
$("input:image")匹配所有图像域；
$("input:reset")匹配所有重置按钮；
$("input:button")匹配所有按钮；
$("input :file")匹配所有文件域；
$("input:hidden")匹配所有不可见元素；

在这里插入图片描述

3、jQuery事件

1.jQuery能够绑定的事件主要包括：
- 鼠标事件click: 鼠标单击时触发； dblclick：鼠标双击时触发； mouseenter：鼠标进入时触发； mouseleave：鼠标移出时触发； mousemove：鼠标在DOM内部移动时触发； hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
- 键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是和。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。
- 其他事件
focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当、或  的内容改变时触发； submit：当提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。

在这里插入图片描述