jQuery 教程 (一)

最新推荐文章于 2024-07-23 12:36:06 发布
最新推荐文章于 2024-07-23 12:36:06 发布
阅读量410 收藏 4
点赞数 14
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82471222/article/details/139854595
版权

 jQuery 教程 

jQuery 语法

文档就绪事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery语法-文档就绪事件</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>jQuery语法-文档就绪事件</p>
    <script>
        $(document).ready(function(){
            alert("文档就绪事件触发");
        });
    </script>
    
</body>
</html>

jQuery 选择器

元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-元素选择器</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="box"> 
        <p>This is </p>
        <p>a paragraph</p>
    </div>

    <div class="box"> 
        <p>This is </p>
        <p>another paragraph</p>
    </div>

    <script>
        $(document).ready(function(){
            // 选择所有p元素
            $("p").css("color", "red");
        });
    </script>
    
</body>
</html>

#id 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-#id 选择器</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="myDiv">
        <p>This is a div with id "myDiv".</p>
    </div>
    <p>This is a paragraph outside the div.</p>
    <script>
        $(document).ready(function(){
            $("#myDiv").css("background-color", "yellow");//给id为myDiv的div添加背景色
        });
    </script>
    
</body>
</html>

.class 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-.class 选择器</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="box">
        <p class="p1">This is the first paragraph.</p>
        <p class="p2">This is the second paragraph.</p>
        <p class="p3">This is the third paragraph.</p>
    </div>
    
    <script>
        $(document).ready(function(){
            //选择器：.class 选择器
            $(".p2").css("color","red"); //设置所有class为p2的元素的颜色为红色
        });
    </script>
</body>
</html>

选取所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取所有元素-$("*")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
   
        <h1>这是一个H1元素</h1>
        <div>这是一个div元素</div>
        <span>这是一个span元素</span>
        <p>这是一个p元素</p>
       

    <script>
        $(document).ready(function(){
            // 选取所有元素
            var allElements = $("*");
            console.log(allElements);// 在控制台输出所有元素的集合
        });
    </script>
</body>
</html>

选取当前 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取当前 HTML 元素-$(this)</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="div1">
        <p>指我变颜色</p>
        <p>指我变颜色</p>
        <p>指我变颜色</p>
    </div>
    <script>
        //页面加载完成后执行
        $(document).ready(function(){
            //点击p元素后执行
            $("#div1 p").click(function(){
                //将p元素的颜色设置为红色
                $(this).css("color","red");
            });
        });
    </script>
</body>
</html>

选取 class 为 intro 的 <p> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取 class 为 intro 的 <p> 元素-$("p.intro")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    
        <p class="intro">这是一段文字</p>

        <p class="intro">这是另一段文字</p>
   
    <script>
        $(document).ready(function(){
            $("p.intro").css("color","red"); //选取 class 为 intro 的 <p> 元素并设置颜色为红色
        });
    </script>
</body>
</html>

选取第一个 <p> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取第一个 <p> 元素-$("p:first")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    
        <p class="intro">这是一段文字</p>

        <p class="intro">这是另一段文字</p>
   
    <script>
        $(document).ready(function(){
            // 选取第一个 <p> 元素
                $("p:first").css("color", "red");
        });
    </script>
</body>
</html>

选取第一个 <ul> 元素的第一个 <li> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取第一个 <ul> 元素的第一个 <li> 元素-$("ul li:first-child")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
    </ul>

    <script>
        $(document).ready(function(){
            // 选取第一个 <ul> 元素的第一个 <li> 元素
            $("ul li:first-child").css("background-color", "yellow");
        });
    </script>
</body>
</html>

选取带有 href 属性的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取带有 href 属性的元素-$("[href]")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.google.com">谷歌</a>
    <a href="https://www.taobao.com">淘宝</a>
    <a href="https://www.jd.com">京东</a>
    <a href="https://www.sohu.com">搜狐</a>
    <a href="https://www.sina.com.cn">新浪</a>
    <a href="https://www.sogou.com">搜狗</a>
    <a href="https://www.yahoo.com">雅虎</a>
    <a href="https://www.bing.com">必应</a>
    <a href="https://www.yahoo.co.jp">雅虎日本</a>
    <a href="https://www.naver.com">네이버</a>
    <a href="https://www.instagram.com">instagram</a>
    <script>
        $(document).ready(function(){
            //选取带有 href 属性的元素
            $("[href]").css("color","red");
        });
    </script>
</html>

选取所有 target 属性值等于 "_blank" 的 <a> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取所有 target 属性值等于 "_blank" 的 <a> 元素-$("a[target='_blank']")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.google.com" target="_blank">谷歌</a>
    <a href="https://www.taobao.com" target="_blank">淘宝</a>
    <a href="https://www.jd.com" target="_self">京东</a>
    <a href="https://www.sogou.com" target="_blank">搜狗</a>
    <a href="https://www.bing.com" target="_blank">必应</a>
    <script>
        $(document).ready(function(){
            //选取所有 target 属性值等于 "_blank" 的 <a> 元素并设置颜色为红色
            $("a[target='_blank']").css("color","red"); 
        });
    </script>
</body>
</html>

选取所有 target 属性值不等于 "_blank" 的 <a> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取所有 target 属性值不等于 "_blank" 的 <a> 元素-$("a[target!='_blank']")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="http://www.sina.com.cn" target="_self">新浪</a>
    <a href="http://www.sohu.com" target="_top">搜狐</a>
    <a href="http://www.qq.com" target="_parent">腾讯</a>
    <a href="http://www.163.com" target="main">网易</a>
    <script>
        $(document).ready(function(){
            // $("a[target!='_blank']").css("color","red"); // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
            $("a[target!='_blank']").css("color","red");
        });
    </script>
</body>
</html>

选取所有 type="button" 的 <input> 元素 和 <button> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取所有 type="button" 的 <input> 元素 和 <button> 元素-$(":button")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>

    <script>
        $(document).ready(function(){
            // 选取所有 type="button" 的 <input> 元素 和 <button> 元素
            $(":button").css("background-color", "yellow");
        });
    </script>
</body>
</html>

选取偶数位置的 <tr> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取偶数位置的 <tr> 元素-$("tr:even")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>10</td><td>11</td><td>12</td></tr>
    </table>
    <script>
        $(document).ready(function(){
            //选取偶数位置的 <tr> 元素
            $("tr:even").css("background-color","yellow");
        });
    </script>
</body>
</html>

选取奇数位置的 <tr> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器-选取奇数位置的 <tr> 元素-$("tr:odd")</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>10</td><td>11</td><td>12</td></tr>
    </table>
    <script>
        $(document).ready(function(){
            //选取偶数位置的 <tr> 元素
            $("tr:odd").css("background-color","yellow");
        });
    </script>
</body>
</html>

程序员-张师傅
关注
  • 14
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
学习JQuery插件开发教程
we
07-10 696
如果你跟我一样，jQuery属于入门级的，那么我建议你看我下一篇jQuery教程：自己动手开发jquery插件 ，这篇插件比较容易理解和模范，适合新手开发jQuery插件。推荐你去看一看。 在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery. 如果对E文好的同学 ，可以看上面的连接。 现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。 插件编写的目的是给已经有的一系列方法或函数做一个封装，以
jquery教程
12-04
jQuery 实例 通过实例来学习！在 W3School，您将找到许多可以在线编辑并测试的 jQuery 实例。 jQuery 实例 jQuery 参考手册 在 W3School，您将找到包含所有 jQuery 对象和函数的完整参考手册。
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 9万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
jQuery 教程
freeking101的博客
04-26 2603
菜鸟教程 --- jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery简介 什么是 jQuery ？ jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML...
jquery详细基础教程
hero_th的博客
12-22 1890
1. jquery选择器 1.基础选择器 和css中的选择器基本一致 $("div1,div2,div3") $("ul li") 后代选择器 $("ul>li") 子代选择器 2.筛选选择器 :first $('li:first') 获取第一个|i元素 :last $('li:last') 获取最后一个li元素 :eq(index) $("li:eq(2)") 获取到的1i元素中，选择索引号为2的元素,索引号index从0开始。 :odd $(
jQuery超详细入门教程
MsWRight的博客
05-21 4445
jquery其实总的来说东西不是很多 期间发现一点问题就是界面中使用本地存储之后，刷新后虽然数据不会丢失，但是刷新会整个页面重新渲染，有些只想在修改数据之前加载的内容也会被重新加载。 然后是我jquery总结的一些知识点 jQuery $是jQuery的别称，jQuery顶级对象 jQuery是一个js函数库，包含以下功能 html元素选取 html元素操作 css操作 html事件函数 js特效和动画 html DOM遍历和修改 AJAX Utilities 除此之外，jQuer还提供了大量的插件 j
jQuery 实例 教程
GarfieldEr007的专栏
02-01 820
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 $("p").hide() 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。 $("#test").h...
jQuery详细教程，基础内容罗列
weixin_53761834的博客
11-04 3019
jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 除此之外，jQuery 还提供了大量的插件。
jQuery 快速入门教程
GarfieldEr007的专栏
08-27 2730
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心：选取元素 使用jQuery 选择器选取元素，并封装为jQuery对象 将现有的DOM元素封装为jQuery对象 将HTML字符串封装为jQuery对象 元素筛选 jQ
jQuery教程chm
05-31
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript...
jquery ztree 使用教程
啊嘞嘞的博客
11-03 645
最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。 1、通过官网下载demo或者下载zTree相关的插件； 官网地址：zTree官网 2、页面文件引入需要的zTree插件： 主要引入的对象有：zTree...
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 175
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 957
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 97
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
最新发布
清水欧度 Odoo ERP
07-23 752
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 611
CTFWP，ctfshow-web42
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员-张师傅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值