5JS库-前端框架（库）-初识jQuery

最新推荐文章于 2024-02-20 10:35:34 发布
最新推荐文章于 2024-02-20 10:35:34 发布
阅读量1.4k 收藏
点赞数
分类专栏： 结构性学前端 文章标签： jquery javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/computer408/article/details/123452567
版权
这篇博客介绍了jQuery的基本概念、优势，并通过多个示例展示了如何使用jQuery进行DOM操作、事件处理、样式控制和动画效果实现，包括添加类、设置样式、显示隐藏元素等，以及链式操作和隐式迭代的运用，强调了jQuery能提高开发效率。
摘要由CSDN通过智能技术生成


前端框架（库）

#初识jQuery

jQuery由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

课件

1jQuery能做什么

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

2jQuery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

3获取jQuery

4jQuery库文件

5jQuery基本语法

6$(document).ready()

7jQuery语法结构

8jQuery操作页面元素

addClass( )方法

使用addClass( )方法为元素添加样式

css( )方法

使用css( )方法设置元素样式

元素的显示和隐藏

使用show( )、hide( ) 方法设置元素的显示和隐藏

9jQuery代码风格

10链式操作

11隐式迭代

12添加注释

13！DOM模型

14DOM对象和jQuery对象

DOM对象转jQuery对象

jQuery对象转DOM对象

总结

代码

示例1：弹出窗口特效

$(document).ready(function() {});

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>弹出窗口特效</title>

</head>

<body>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

<script>

    $(document).ready(function() {

        alert("我欲奔赴沙场征战jQuery，势必攻克之！");

    });

</script>

</body>

</html>

示例2：导航菜单

$("li").click(function(){

    $("#current").addClass("current");

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>左导航菜单</title>

    <style type="text/css">

        li{list-style: none; line-height: 22px; cursor: pointer;}

        .current{background: #6cf; font-weight: bold; color: #fff;}

    </style>

</head>

<body>

<ul>

    <li id="current">jQuery简介</li>

    <li>jQuery语法</li>

    <li>jQuery选择器</li>

    <li>jQuery事件与动画</li>

    <li>jQuery方法</li>

</ul>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("li").click(function(){

            $("#current").addClass("current");

        });

    });

</script>

</body>

</html>

示例3：仿京东左侧菜单mouseover/out

*{padding:0;margin:0;}

a{text-decoration:none;}

.nav-box{

    width:210px;

    margin:5px 0 0 5px;

}

.nav-top a{

    display:block;

    height:45px;

    font-size:16px;

    line-height:45px;

    padding:0 10px;

    background:#B1191A;

    color:#fff;

}

ul{background:#c81623;list-style:none;padding-bottom:1px;}

ul li{

    height:30px;

    line-height:30px;

    font-size:14px;

    color:#fff;

    position:relative;

    padding-left: 5px;

}

ul li a{color:#fff;}

ul li div{display:none; position: absolute; left: 211px; top:0px;}

$(document).ready(function(){

    /**一级内容悬浮**/

    $("li").mouseover(function(){

        $(this).css({"background":"orange"});//当前li 背景颜色为橙色

        $(this).children("div").show();//让相应二级内容显示

        

    }).mouseout(function(){

             $(this).css({"background":"#c81623"});

            $(this).children("div").hide();

    });

});

<!doctype html>

<html>

 <head lang="en">

  <meta charset="UTF-8">

  <title>仿京东左侧菜单</title>

  <link href="css/style.css" rel="stylesheet"/>

 </head>

 <body>

    <div class="nav-box">

        <div class="nav-top"><a href="">全部商品分类</a></div>

        <ul>

            <li>

                <a href="">家用电器</a><div><img src="images/erji.jpg"/></div>

            </li>

            <li>

                <a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>

            </li>

            <li>

                <a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>

            </li>

            <li>

                <a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>

            </li>

            <li>

                <a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>

            </li>

        </ul>

    </div>

    <script src="js/jquery-1.12.4.js"></script>

    <script src="js/hover.js"></script>

 </body>

</html>

示例4：问答特效

$("h2").css("background-color","#CCFFFF").next().css("display","block");

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>问答特效</title>

    <style type="text/css">

        h2{padding: 5px;}

        p{display: none;}

    </style>

</head>

<body>

<h2>什么是受益人?</h2>

<p>

    <strong>解答：</strong>

    受益人是指人身保险中由被保险人或者投保人指定的

    享有保险金请求权的人，投保人、被保险人可以为受益人。

</p>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("h2").click(function(){

            $("h2").css("background-color","#CCFFFF").next().css("display","block");

        });

    });

</script>

</body>

</html>

示例5：隐式迭代方法的应用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>隐式迭代</title>

    <style type="text/css">

        li {line-height:22px;}

    </style>

</head>

<body>

<ul>

    <li>数码产品</li>

    <li>家用电器</li>

    <li>妇幼保健</li>

    <li>时尚丽人</li>

</ul>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("li").css({"font-weight":"bold","color":"red"});

    });

</script>

</body>

</html>

Java_Eastlin
关注
专栏目录
前端知识之jQuery
prigilm的博客
11-03 1553
jQuery 文章目录jQuery一、什么是jQuery二、jQuery的优势三、jQuery的内容四、jQuery的版本五、jQuery的两种导入方式六、jQuery语法七. jQuery对象与标签对象之间的转换九、查找标签1、基本选择器2、组合选择器/分组嵌套3、基本筛选器4、属性选择器5、表单筛选器6、筛选器方法7、总结十、操作标签1、CSS 类操作2、CSS样式操作3、位置操作4、尺寸5、文本操作6、值操作7、属性操作8、文档操作9、总结十一、事件1、jQuery绑定事件的两种方式2、克隆事件3、自
前端基础（一）：Jquery
鹏哥哥Aaa
01-18 8726
1.dom和jquery的互相转化 2.选择器 3.过滤器 4.DOM操作 1.dom和jquery的互相转化 dom转jquery:$(dom对象) jquery转dom: 方法一：$(a)[0] 方法二：$(a).get(0) 2.选择器 ...
jQuery-1.12.4.js
06-13
从网上整合的 jQuery-1.12.4.js和 jQuery-1.12.4.min.js文件，希望对需要的人有帮助
JQuery
a95516819的博客
12-29 123
一。JQuery的优点：1.体积小，2.强大的选择器，3.出色的DOM封装，4.可靠的事件处理机制，5.出色的浏览器兼容性，6.使用隐式迭代简化编程，7.丰富的插件支持 二。JQuery的语法 三。 四。JQuery操作页面元素 1.addClass() 1 <title>左导航菜单</title> 2 <style...
五 js对象简介
jadeshu的博客
03-02 283
对象简介     js中没有"类"的概念，只有对象。     A:对象声明方式有三种 ------------1.调用Object函数创建对象:   var person = new Object;             对于一个已经声明的对象，可以给该对象设置任意属性。比如 var person = new Object(); person.name = "zhangsan"...
jQuery是一个非常优秀的js库
Π指针
08-09 1017
jQuery是一个非常好的js库，在他占领的时代下，当时的前端行业熠熠生辉，无一操作不展现它的智慧本文展示了jQuery使用的基本函数和操作(具体目录有)本文是一篇笔记性结合性的文章，适合去阅读，阅读并学习完那么jQuery的基础就学会了,可以结合HTML+CSS即可自由开发出你想要的东西了，成功入门不是精通，精通还需要大量的前端知识...
5-5 JS
fukang_的博客
02-25 97
5-5 JS 文章目录5-5 JS一、简介二、嵌入方式三、JS的基础语法四、JS的数据类型五、进制转换六、值类型与引用类型的区别七、数据类型转换八、运算符九、函数十、全局变量和局部变量十一、系统常用的内置函数 一、简介 二、嵌入方式 可以放在任意位置 三、JS的基础语法 四、JS的数据类型 五、进制转换 十进制装换成其他进制 其他进制转换成十进制 六、值类型与引用类型的区别 七、数据类型转换 八、运算符 九、函数 不同于Java，少传多传参数不会出错，少传
我耀学IT: Jquery-JavaScript代码库-初识篇
最新发布
2301_78414876的博客
02-20 1656
JQuery是一个JavaScrpit函数库JQuery是一个轻量级的"写的少，做的多"的JavaScript库。HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities除此之外，JQuery还提供了大量的插件。需求：使用编辑器完成第一个JQuery程序*实现步骤：*在HBuilder X中新建一个项目打开index.html页面在<body></body>标签中写入一个段落内容。
Web前端速成(Html+Css+JavaScript+jQuery)-17.jQuery-前后台数据交互
05-17 400
介绍jQuery框架下操作页面元素的方法和jQuery框架下ajax实现前后台数据交互的方法。
Web前端框架应用：第1章 Vue基础入门-概述.pptx
06-06
jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。;Angular： React： Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过...
jquery-1.12.4.js
10-02
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
js的jquery文件（版本为1.12.4）
12-12
jquery-1.12.4-min.js文件，为大家提供下载路径，有需要的下载
【JQuery】〖JQuery未压缩开发版〗jquery-1.12.4.js
12-13
【JQuery】〖JQuery未压缩开发版〗jquery-1.12.4.js 我寻见一片海 碧蓝且耀着光 大片船只航行其上 都向着远方 Shared by Foriver_江河 © 1997-8023 江河 All Rights Reserved.
Web前端框架应用：第1章 Vue基础入门-开发环境.pptx
06-06
jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。;Angular： React： Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过...
JavaScript框架-4
12-20
- **JQuery 初识**：JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、Ajax交互以及动画效果。它封装了许多实用的方法，如选择器、筛选器和链式调用，使得开发者可以用更简洁的代码实现复杂的前端...
5、js事件
qq_54199667的博客
02-14 143
1. JS事件(核心)： 事件的定义: 事件就是用户对网页或浏览器做出的动作.通常来说,鼠标和键盘的动作称之为事件。 当事件发生时，你可以做一些事情.比如在事件触发时可以执行一些JavaScript代码。 事件的使用: 为HTML 元素绑定事件 <html标签 事件名="JavaScript 代码" 事件名2=“JavaScript** 代码” … > 注意：一个html元素可以绑定多个事件，事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 事件的分类: 1.1 鼠标事件: ​
5.JS基础（二）
剑指苍天
02-24 483
引用数据类型（对象）：为了弥补基本数据类型的不足，可以让不一样的数据类型之间产生关系，所以要把他们变成一个整体（对象） 一、内置对象 1、function函数对象 2、数组对象 3、Date日期对象 Function创建，（包含的内置属性：length：函数形参列表个数，调用：alert（对象，length）） 1、var fun=new Function（形参，函数体） var fun=new Function（”a“，”b“，alert（a））该函数指显示a，所以传入了b也不会显示，用形参和函数体括号分
ASP.NET 5 & MVC6初识：项目结构与配置解析
此外，引入了npm的package.json文件，Bower的bower.json文件，以及gulp的gulpfile.js文件，分别用于JavaScript包管理和前端资源的自动化管理。 Startup.cs文件作为新的程序启动入口，类似于Global.asax。Project_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值