jQuery第二章

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量733 收藏 21
点赞数 18
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79613063/article/details/134915191
版权

一.引言-复习CSS选择器
<head>
        <meta charset="utf-8">
        <title></title>
        
        <style>
            /*
                CSS选择器： 方便获取HTML的元素
            */
            
            /*
                1.标签选择器：直接通过标签名即可获取元素
                表示将所有的p标签都设置为红色
            */
            p{
                color: red;
            }
            /*
                2.类(class)选择器：语法：.xxx  表示获取class为xxx的元素
            */    
            .a{
                font-size: 20px;
            }
            
            /*
                3.id选择器：语法：#xxx  表示获取id为xxx的元素  注意：确保id在本网页的唯一性
            */    
            #b{
                font-size: 120px;
            }
            
            /*
                4.群组选择器：语法：xxx,xxx,xxx  通过,分割将所有选择器进行统一操作
                例如下面的写法表示：获取id为b  class为a的  p标签
            */    
            #b,.a,p{
                font-size: 120px;
            }
            
            /*
                5.后代选择器：语法：父  子  通过空格获取父下面的所有的子元素包括孙子...
            */    
            
            .a1 li{
                color: red;
            }
            
            /*
                6.子代选择器：语法：父>子  通过大于号获取父下面的子元素  只能获取儿子
            */    
            
            #aaa>.a{
                color: red;
            }
            
            
        </style>
        
        <p class="a">啊啊啊</p>
        <p class="a">啊啊啊</p>
        <p id="b">啊啊啊</p>
        <p class="a">啊啊啊</p>
        <p>啊啊啊</p>
        
        <hr>
        
        <ul class="a1">
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
            <li>ee</li>
            <span>ff</span>
        </ul>
        
        
        <span id="aaa">
            <span class="a">我是儿子a</span>
            <span class="a">我是儿子a</span>
            <span class="b">我是儿子b
                <span class="a">我是孙子a</span>
            </span>
        </span>
        
        
    </head>

二.引言jquery对象再讲解
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script>
            
            $(    function(){
                let p = $("p").text();
                console.log(p);//不会报错,但是无法得到理想值
            }   );
            
        </script>
    </head>
    <body>
        
        <p>我是p标签</p>
        
        <script src="js/jquery.js"></script>
        <script>
            $("p").text("~~~")
            
            //$(xxx) 的相关概念
            //jquery中最常见的函数.  有2个作用:
            //1. 作为元素选择器 来获取元素.(修改元素。)
            //  只需要要css选择器 通过字符串的形式作为参数传递进行即可
            //  例如$("p")  表示获取所有的p标签
            //  例如$(".p")  表示获取所有class为p的元素
            
            //2. 预加载函数（文档就绪函数）   先将HTML加载完成 再来执行我  用法:将function作为参数传递即可
            //如果可以保证js代码在HTML下方. 就可以不用该函数
            
            
        </script>
    </body>
    
</html>                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>1</td>
                <td>jack</td>
                <td>22</td>
                <td>湖南</td>
                <td>男</td>
            </tr>
            
        </table>
        
        
        
        <script src="js/jquery.js"></script>
        <script>
            
            
            $("tr:odd").css("background-color","yellow");
            $("tr:even").css("background-color","blue");
            
            
            
            $("tr:first").css("background-color","Red");
            $("tr:last").css("background-color","pink");
            
        </script>
    </body>
</html>

岳职软件22-01-40
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery第二章课后作业
gz98411的博客
07-12 4563
3.模拟计算机病毒效果，当打开一个页面时，会不停的弹出窗口。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;病毒网页&lt;/title&gt; &lt;/head&gt; &lt;b
jQuery第二章 jQuery选择器
Lv Zejiang
08-29 233
JavaScript自我学习路线jQuery选择器一、基本选择器1. ID选择器2. class选择器3. 标签选择器4. 所有选择器5. 组合选择器二、表单选择器 jQuery选择器 选择器：就是一个字符串，用来定位DOM对象的，通知jQuery函数定位满足条件的DOM对象，然后可以通过jQuery的函数操作DOM 选择器分为基本选择器、表单选择器 一、基本选择器 根据ID、class属性，标签类型名定位HTML元素，转为jQuery对象 1. ID选择器 通过DOM对象的ID定位DOM对象，通
jquery第二章
qq_36024638的博客
05-03 768
window常用属性： History：有关客户访问过的URL的信息 Location: 有关当前url的信息 常用方法： Confirm()将弹出一个确认对话框 open()在页面上弹出一个新的浏览器 Close()用于关闭窗口 history对象 Back() 加载 history 对象列表中前一个URL Forward()加载history对象列表中的后一个URL go
JQuery第二章：DOM（学习笔记）
weixin0605的博客
10-21 387
JQuery第二章：DOM本内容为慕课网JQuery学习笔记 **概述**jquery的DOM操作包括查找节点，插入节点，删除节点，替换节点，复制节点，包裹节点
JQuery第二章 JS 上机
qq_36074043的博客
04-25 4978
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'sj1.jsp' starting page
北大青鸟 JQuery制作特效 第二章 （上机练习
热门推荐
SpicyStriplt的博客
07-06 1万+
北大青鸟 JQuery制作特效 第二章 （上机练习 练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>制作简易的当当购物车页面</title> <link type="tex...
JQuery 第二章 JS课后
qq_36074043的博客
04-25 2165
kh4.html function disptime() { var now= new Date(); var hour = now.getHours(); if (hour>=0 && hour <=12) document.write("上午好!欢迎来到贵美") if (hour>12 && hour<= 18) do
第二章 JQuery事件和DOM操作 ① 笔记
Liu_wen_wen的博客
06-24 215
jQuery事件 jQuery对象event/e属性 事件绑定 DOM操作 jq创建节点 添加节点 删除节点 复制节点 节点方法 省市级联 JQ完成购物车
Jquery第二章appendTo方法到方法的使用练习第二节
Camel
05-07 501
效果图 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list2other</title> <script type="text/javascript" src="./js/jquery-1.4.2.js"&gt...
Jquery 基础知识 第二章
lixiaoqidecsdn的博客
07-23 88
Jquery 基础知识 第一章
Vue双向绑定
m0_56131422的博客
09-01 498
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 292
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 929
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 112
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2212
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1202
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 346
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 874
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nuxt3入门：样式的注入、定义和使用（第3节）
沐爸的博客
08-31 1062
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
jQuery权威指南第二版：提升Web开发效率的基石
相比于第一版，第二版做出了重大更新，主要包括第七章的新增内容，可能是关于jQuery高级特性的详细介绍，比如插件开发、动画效果、DOM操作的深入讲解等。作者根据读者反馈，对全书结构和内容进行了优化，以便更好地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值