原创：Jquery入门详解

最新推荐文章于 2022-04-09 21:02:52 发布
最新推荐文章于 2022-04-09 21:02:52 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 前端技术课程系列 文章标签： jquery html function class prototype safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redarmy_chen/article/details/6296703
版权

JQuery入门介绍

1、JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。其宗旨是写更少的代码,做更多的事情。

2．JQuery初步学习：

(1) Jquery对象的引入方式：

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

(2) 加载页面（有两种方式加载）：

Jquery的页面载入事件处理方式

$(document).ready(function(){

      });//  加载html 立即加载

 或

 $(function(){

      }); 

(3)  DOM对象与JQuery对象之间进行相互转化

DOM对象 是不能使用Jquery中的方法的. JQuery中的对象也不能使用DOM对象的方法，但两者之间是可以转换的。其转换方式如下：

   1．DOM对象转换成Jquery对象的方式

     对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象

     例：var $document=$(document);

   2．Jquery对象转换成DOM对象的方式

第一种：可以采用Jquery中get(index)方法获取

get(index)----à取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象

例：var domObject = $(".rdc").get(0);

     第二种：Jquery对象返回的是一个数组对象可以采用如下方式转换，

var domObject = $("#thed")[index]; index是数组对象的下标

例：var domObject = $("#hed")[0];

(4) 关于jquery对象的主要方法

get(index)方法, Jquery对象转换成DOM对象 

size()方法,获取query对象的长度 例：alert(($("tr")[$("tr").size()-1]).innerHTML);

length属性   例： alert(($("tr")[$("tr").length-1]).innerHTML);

注： 使用size()方法与length属性最后得到的结果是一样的。

3、Jquery中的基本选择器

id选择器     ID匹配的选择器Jquery对象   例：$("#thed")

class选择器  class匹配选择器Jquery对象  例：$(".thed")

元素选择器    根据给定的元素名称获取Jquery对象  例：$("tr")

*             匹配所有的元素的Jquery对象  例：$("*")

并列选择器    匹配所有选择器的Jquery组合对象，用英文的逗号区分               

例：$("tr,tr.rdc")

<!--引入js类库文件-->

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

 

  <script type="text/javascript">

  $(document).ready(function(){

  //ID匹配的选择器Jquery对象

       //alert($("#thed"));

     /**转换成DOM对象的方式

       1、Jquery对象返回的是一个数组对象可以采用如下方式转换

         var domObject = $("#thed")[0];

       */

   alert(($("#thed")[0]).innerHTML);

   //class匹配选择器Jquery对象

   alert($(".rdc"));

   /**

        2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取

 

        get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象

      */

   var domObject=$(".rdc").get(0);

   alert(domObject.innerHTML);

 

    //匹配所有的元素的Jquery对象

   alert($("*"));

   alert($("*").get(0).innerHTML);

  

    //根据给定的元素名称获取Jquery对象

   alert($("tr"));

   /**采用第一种方式把$("tr")转换成DOM对象*/

   alert(($("tr")[$("tr").size()-1]).innerHTML);

   alert(($("tr")[$("tr").length-1]).innerHTML);

   //匹配所有选择器的Jquery组合对象

   alert($("tr,tr.rdc"));

   alert(($("tr,tr.rdc")[$("tr,tr.rdc").length-1]).innerHTML);

  

  })

  </script>

 

案例解析：此javacript中介绍了将jquery对象与dom对象之间的转换；

使用了get(index)  size()方法以及length属性

附带body代码：

<body>

  <div>

       <div>

           <h1>  选择器的使用方式</h1>

       </div>

       <div>

              <table border="1px" cellpadding="0" cellspacing="0">

                  <thead>

                     <tr id="thed">

                         <th>

                            序号

                         </th>

                         <th>

                            名称

                         </th>

                         <th>

                            邮箱

                         </th>

                     </tr>

                  </thead>

 

                  <tbody id="tbdy">

                     <tr class="rdc">

                         <td>

                            1001

                         </td>

                         <td>

                            redarmy_chen

                         </td>

                         <td>

                            redarmy_chen@qq.com

                         </td>

                     </tr>

                         <td>

                            1002

                         </td>

                         <td>

                            x_j

                         </td>

                         <td>

                            redarmy_chen@qq.com

                         </td>

                     </tr>

                  </tbody>

              </table>

           </div>

  </div> 

</body>

上内容归redarmy_chen总结创建,如需转载请添加出处，如有疑问请发送到redarmy_chen@qq.com

 

redarmychen
关注
专栏目录
Spring Boot入门(18)：使用Spring Boot快速实现静态资源映射，完美展示前端页面！
**My Coding Family**
04-29 5384
Spring Boot如何设置静态资源映射，一文带你搞定。
【Python全栈开发从入门到实战】持续更新中......
延瓒
08-13 780
本专栏为Python全栈开发系列文章，技术包括Python基础、函数、文件、面向对象、网络编程、并发编程、MySQL数据库、HTML、JavaScript、CSS、JQuery、bootstrap、WSGI、Django、Flask、后期运维、git使用、Linux运维、Python结合Shell结合场景开发自动化脚本等一系列文章. 从入门到实战。 文章内容来自博主学习笔记，修整发布。........................
jQuery详解
qdyones的博客
03-06 767
1.什么是JavaScript？ JavaScript是一门直接上最流行的脚本语言 ECMAScript是JavaScript的一种标准规范 2.基本使用及HelloWorld JavaScript快速上手：第一个JavaScript 设置弹窗alert <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个JavaScript程序&lt
jQuery入门详解
运维@小兵的博客
02-03 518
文章目录一、jQuery介绍二、jQuery基本使用`2.1.使用格式``2.2.JQuery语法：`2.2.1.基础语法2.2.2.示例三、选择器四、jQuery操作HTML`4.1.隐藏和显示元素``4.2.获取与设置内容`4.2.1.示例一4.2.2.示例二：`4.3.获取、设置和删除属性`4.3.1.示例一：4.3.2.设置超链接值4.3.3.删除超链接属性`4.4.添加元素``4.5.删除元素``4.6.设置CSS样式`五、jQuery Ajax`5.1.背景``5.2.定义``5.3.常用参数`
jQuery
m0_46337171的博客
01-06 223
目录前言1.jQuery介绍1.1 jQuery能做什么1.2 jQuery的优势2 jQuery的使用2.1 基本的语法介绍2.2 jQuery对象与DOM对象2.3 选择器2.3.1 基本选择器2.3.2 层次选择器2.3.3 属性选择器2.3.4 过滤选择器2.4 事件2.4.1 鼠标事件2.4.2 键盘事件2.4.3 表单事件2.4.4 鼠标悬停复合事件2.4.5 连续点击复合事件2.4.6 事件的动态绑定2.5 元素的隐藏和显示2.5.1 改变元素的宽和高（带动画效果）2.5.2 改变元素的高（拉
python tree结构_Python入门篇-数据结构树（tree）篇
weixin_39765339的博客
12-11 4942
Python入门篇-数据结构树(tree)篇作者：尹正杰版权声明：原创作品，谢绝转载！否则将追究法律责任。一.树概述1>.树的概念非线性结构，每个元素可以有多个前躯和后继树是n(n>=0)个元素的集合：n = 0时，称为空树树只有一个特殊的没有前驱的元素，称为树的根root树中除了根结点外，其余元素只能有一个前驱，可以有零个或者多个后继递归定义：数T是n(n>=0)个元素的集合。...
送你一份入门前端学习路线图
m0_67402731的博客
03-02 479
互联网时代，只要公司有开发互联网产品的需要，包括网站、网页、H5、小程序、APP等，就一定少不了前端开发工程师岗位。如今的“大前端时代”，前端也已不限于传统PC端和移动手机端，随着VR、可穿戴设备、车载系统、智能投影等设备的出现， Web前端直接进入了各个垂直领域，前端开发将有更阔的发展空间。 那么该如何学习前端技术呢？网上攻略很多，本文从自学前端该阅读什么书的角度为你解惑。首先送上前端学习阅读路线图： 高清大图下载**：关注华章计算机，在后台对话框回复前端** 章老师口解版 夯实前端基础 入门前端开.
【postman】postman入门
12-25 1215
文章目录1. postman初步认识 1. postman初步认识
JQuery 详解
H445584704的博客
03-04 494
一、概念 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 二、快速入门 简单来说，JQuery就是一个JavaScript框架，简称
jquery详解
qq_45240472的博客
04-09 3127
1、jQuery概述 1.1、JavaScript库 仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。 JavaScript库:即library ,是-个封装好的特定的集合(方法和函数)。从封装-大堆函数的角度理解库,就是在这个库中,卦装了很多预先定义好的函数在面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为
JQuery的作用详解
KaiFa_XiaoYang的博客
12-30 2010
一、 jQuery是什么？ jQuery是一个JavaScript库，是由John Resig创建于2006年1月的开源项目，jQuery凭借着简介的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档，操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说： 1、jQuery是一个优秀的JavaScript库。 2、jQuery极大地简化了JavaScript编程。 3、jQu
JQuery详解
AOOOOO李
03-09 288
事件 鼠标事件 键盘事件 其他事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> </hea.
jQuery(详解)
wenkezhuangyuan的博客
08-20 1625
1.简介 jquery是js的框架，利用了选择器(借鉴了css的选择器)查找要操作的dom节点(dom对象)，将dom节点对象封装成jquery对象，调用jquery提供的方法或者属性操作dom节点。 目的: 1.简化代码 2.解决了兼容性问题 2.编程步骤 1.引入jquery.js文件<script src=""></script> 2.使用juqery提供的选择器查找节点，var $obj = $("#id") 3.调用jquery提供的属性或方法，操作该节点
零基础入门：jQuery教程详解
"《免费_JQuery_入门教程》是一套针对初学者设计的详细且系统的学习资源，旨在帮助读者深入了解和掌握jQuery这款流行的JavaScript库。该教程由作者以深入浅出的方式撰写，共计十一部分，从基础入门到高级应用，涵盖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值