JQuery学习之路-样式篇

最新推荐文章于 2022-07-21 10:46:40 发布
最新推荐文章于 2022-07-21 10:46:40 发布
阅读量404 收藏
点赞数
分类专栏： javascript 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16666847/article/details/53887201
版权

一.样式篇

div中添加内容显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>HellowJQuery</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:solid 1px #888;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
             $("div").html("HelloJQery");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

运行结果

HelloJquery

jQuery对象与DOM对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:solid 1px #888;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#1').html("HelloJQuery");
            });
    </script>
</head>
<body>
    <div id="1"></div>
</body>
</html>

DOM对象转化成jQuery对象

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

    <script type="text/javascript">
        $("div").first().css('color', 'red'); //给第一个元素设置颜色
    </script>

</body>

</html>

jQuery选择器之id选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>
    <div id="imooc">
        <p id="imooc"></p></p>
        <p>jQuery选中</p>
    </div>
    <div id="imooc">
        <p id="imooc">test</p></p>
        <p>jQuery未选中</p>
    </div>

    <script type="text/javascript">
        //通过jQuery直接传入id
        //id的唯一，只选择到了第一个匹配的id为imooc的div节点
       $("p#imooc").css('color', 'red');
    </script>

</body>

</html>

jQuery选择器之类选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>

    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        $('.imooc').css("border", "3px solid red");
    </script>
</body>

</html>

jQuery选择器之基本筛选选择器
这里写图片描述

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
    $(".div:first").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //找到最后一个div
     $(".div:last").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>

    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>


    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选择单个
    $(".aaron:eq(5)").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(0):lt(1)").css("border", "3px groove blue");
    </script>

     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    ?.css("color", "#CD00CD");
    </script>

    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

等等再写其他的吧。
明天入职，不知道以后会是啥样，加油吧oblivion

oblivion0001
关注
专栏目录
第一课 jquery学习准备工作-011
08-03
【jQuery学习准备工作详解】 在深入学习jQuery之前，我们需要先对前端开发的基础有一个全面的理解。jQuery是一种强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本篇将从理论基础...
jquery学习笔记--1
03-16
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识，包括其核心概念、选择器、DOM操作、事件...
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 10万+
目录第一章 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学习---这一篇就够了
小女不才
01-11 1146
目录1 初识jQuery1.1 jQuery是什么？1.1.1 体验jQuery1.1.2 为什么要使用jQuery1.1.3 版本选择1.2 如何使用jQuery？1.3 jQuery入口函数1.3.1 jQuery与JavaScript加载模式对比1.3.2 为什么我们能访问$符号?2 jQuery核心函数2.1 核心函数2.2 jQuery对象2.3 jQuery静态方法2.2.1 jQuery.holdReady(hold)2.2.2 $.each(object,[callback])2.2.3 $
JQuery-样式篇
wust_cyl的博客
05-09 1470
内容来自慕课网：点击打开链接     巩固基础知识还是很有用的jQuery对象与DOM对象对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：&lt;p id=”imooc”&...
【总结整理】JQuery基础学习---样式篇
weixin_33816946的博客
02-25 193
进入官方网站获取最新的版本http://jquery.com/download/ 中文https://www.jquery123.com/ <!--JQuery:轻量级的JavaScript库，核心依然是JavaScript，不仅兼容了CSS3，还兼容各种浏览器--> <!--1.容易上手 2.强大的选择器 3.解决浏览器的兼容 4.完善的事件机制 5.出色三维Aj...
JQuery基础-样式篇（学习笔记）
Aaron_NaNa的博客
03-27 155
本笔记是学习慕课网课程时整理，侵删。 1.1、环境搭建 jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 标签内中，通过 script 标签引入 jQuery 库即可。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title
前端学习之路---jquery
qq_40707650的博客
09-26 381
今天开始我们的jquery学习了                      下一篇    php基础 目标：使用jQuery设计常见的效果       掌握jQuery的思想设计与理念 学习路线：jQuery的基本概念、选择器、DOM操作、动画、事件以及扩展。 为什么要学习jQuery？ 使用javascript开发过程中，有许多的缺点： 1. 查找元素的方法...
前端学习笔记--jQuery--基础知识--样式篇
chiweiya9693的博客
01-12 121
[转]来自于慕课网学习整理。 一、样式篇 1.搭建环境： 进入官方网站获取最新的版本http://jquery.com/download/ ，这里需要注意 jQuery 分 2 个系列版本1.x与2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是...
jQuery基础----修改CSS样式
u011863822的博客
07-21 5115
本篇就是简单的聊一写css操作，或者说是简单的演示。其中有css()操作属性的三种不同，以及addClass，removeClass，还有最神奇的操作toggleClass切换状态的神奇操作。
jQuery 学习-样式篇（三）：jQuery 选择器类型详解
杂货铺子
12-25 6241
jQuery 选择器 一、ID 选择器 ID 选择器是最基本的选择器，jQuery 内部使用了 JavaScript 函数 document.getElementByID() 来处理 ID 的获取。 ID 是唯一的，每个 ID 在每个页面中只能使用一次，如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。 在 jQuery 中，ID 选择器的命令是 $('#id')： <!DOCTYPE html> <html> <head> <ti
jQuery学习记录----可编辑的表格（六）
03-19
在本篇博客“jQuery学习记录----可编辑的表格（六）”中，作者分享了如何使用jQuery实现一个可编辑的表格功能。这个功能在Web应用中非常常见，特别是在数据管理和展示场景下。jQuery是一个强大的JavaScript库，它...
jQuery学习记录----弹出窗口（四）
03-19
本篇文章将聚焦于jQuery中的弹出窗口实现，这是Web开发中常见的一种用户交互功能，例如警告、确认或信息提示。 在jQuery中，弹出窗口通常通过两种方式实现：模态对话框（modal dialogs）和自定义函数。模态对话框如...
HNU-ES实验一（步进电机）
10-13
HNU-ES实验一（步进电机）
scandir-1.10.0-cp38-cp38-win_amd64.whl
10-13
scandir-1.10.0-cp38-cp38-win_amd64.whl
【图像配准】基于matlab GUI Powell+蚁群算法图像配准【含Matlab源码 928期】.md
10-13
CSDN Matlab武动乾坤上传的资料均有对应的代码，代码均可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 图像配准：SAR-SIFT改进的SAR图像配准、SIFT图像配准拼接、Powell+蚁群算法图像配准、Harris+SIFT图像配准、OpenSUFT图像配准、图像互信息值图像配准
《Machine Learning》课程PPT-吴恩达09
最新发布
10-13
人工智能 Neural Networks: Learning   1、Cost function 2、Backpropagation algorithm 3、Backpropagation intuition 4、Implementation note: Unrolling parameters 5、Gradient checking 6、Random initialization 7、Putting it together 8、Backpropagation example: Autonomous driving (optional)
ceODBC-2.0.1-cp35-cp35m-win_amd64.whl
10-13
ceODBC-2.0.1-cp35-cp35m-win_amd64.whl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值