| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> jQuery基础 -> 正文阅读 |
|
|
[JavaScript知识库]jQuery基础 |
|
jQuery介绍 js: ?1、入口函数只有一个，window.onload 浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器 2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题 3、ajax操作（比较好） (2)、什么是jQuery 1、jQuery是一个JavaScript函数库。 2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。 (3)、为什么使用jQuery 1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。 2、很多大公司都在使用 jQuery， 例如:Google、Microsoft、IBM、Netflix。 3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6! jQuery安装 jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它： <head> <script src="jquery-1.10.2.min.js"></script> </head> 2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </head> ?jQuery语法 1、美元符号定义 jQuery 2、选择符（selector）"查询"和"查找" HTML 元素 3、jQuery 的 action() 执行对元素的操作。 (2)、实例 1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ // 开始写 jQuery 代码... } ); 2、简洁写法（与以上写法效果相同）: $(function(){ // 开始写 jQuery 代码... }) 、1.3.3了解jQuery的$符号 其实$就是一个函数：$();参数不一样，功能不一样 $常用的几种情况： $(function() {});//参数是function，说明是入口函数 $(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素 $(“div”);//查找所有的div元素 $(document).ready(funciton(){})//将document转换成jQuery对象 (4)、jQuery 入口函数与 JavaScript 入口函数的区别 ?jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 ?JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。 演示示例：jQuery基础语法 课堂练习：使用jQuery输出一串文字 JQuery选择器 1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。 3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 4、jQuery 中所有选择器都以美元符号开头：$()。 (2)、基本选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素 交集选择器（标签指定式选择器） $(“div.redClass”); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。 总结:和css选择器的用法一模一样 演示示例：jQuery基本选择器 课堂练习：使用交集选择器使被选元素变色 (3)、层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 总结：跟CSS的选择器一模一样。 演示示例：jQuery层级选择器 (4)、过滤选择器 用法 描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素 :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素 总结：这类选择器都带冒号。 演示示例：jQuery过滤选择器 课堂练习：使用过滤选择器li标签偶数行元素变色 (5)、筛选选择器（方法） 用法 说明 children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器 find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。 parent() $(“#first”).parent(); 查找父亲 eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始 next() $(“li”).next() 找下一个兄弟 prev() $(“li”).prev() 找上一次兄弟 Index() $(“li”).index() 获取当前的位置（索引） not() $("p").not(".intro") 返回不带有类名 "intro" 的所有 <p> 元素 总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。 演示示例：jQuery筛选选择器 课堂练习：查找第二个li标签的后代的兄弟元素 jQuery事件 1、页面对不同访问者的响应叫做事件。 2、实例：在元素上移动鼠标、选取单选按钮、点击元素 (1)、事件语法 1、单击事件 $("p").click(function(){ // 动作触发后执行的代码!! }); 双击事件 ? ? $(this).hide(); }) 3、鼠标进入 $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); 4、鼠标离开 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); 5、获取焦点 $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); 6、失去焦点 $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/23 9:30:56- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |