jQuery:(一)jQuery简介

一、jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装。

二、jQuery的优势
1、强大的选择器。
2、出色的DOM封装。
3、可靠的事件处理机制。
4、出色的浏览器兼容性。
5、使用隐式迭代简化编程。
6、丰富的插件支持。
7、体积小,压缩后只有100KB左右。

三、下载和使用jQuery
1、下载
进入jQuery官网:http://jquery.com下载
2、jQuery库文件
jQuery库分开发版和发布版

名称 大小 说明
jquery-1.版本号.js(开发版) 约268kb 完整无压缩版本,主要用于测试、学习和开发。
jquery-1.版本号.min.js(发布版) 约91KB 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目。

3、搭建jQuery使用环境

3.1 下载jQuery类库。

3.2 在页面中引入jQuery

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

四、jQuery语法结构

语法:$(selector).action();

说明:

工厂函数$():将DOM对象转化为jQuery对象。
选择器 selector:获取需要操作的DOM元素。
方法action():jQuery中提供的方法,包括绑定事件处理的方法。

示例:

$("#current").addClass("current");   // id选择
$("input").addClass("current");     // 标签选择
$(".current").addClass("other");    // class类名选择

五、jQuery代码风格
1、$(selector).action();
$等同于"jQuery"
$(document).ready()等同于jQuery(document).ready()
2、方法举例

语法 说明
css("属性","属性值") 为元素设置CSS样式的值
addClass("类样式名") 为元素添加类样式
html("html代码") 为元素设置innerHTML的值

操作连缀书写:
$("h2").css("background-color","#CCFFFF").next().css("display","block");

六、$(document).ready()
$(document).ready()与window.onload类似,但也有区别:

  window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后(包括图片、视频等)才能执行 网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、视频等)并没有加载完
编写次数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 $(function(){
   //执行代码
});

七、jQuery对象和DOM对象
1、DOM对象:直接使用JavaScript获取的节点对象
   var objDOM=document.getElementById("title");
   var objHTML=objDOM.innerHTML;
2、jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法:
   $("#title").html()
   等同于
   document.getElementById("title").innerHTML;
提示:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用。

3、jQuery对象转DOM对象

jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
示例:
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName[0];       //DOM对象
通过get(index)方法得到相应的DOM对象
示例:
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName.get(0);   //DOM对象

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jQuery对象转化成DOM对象</title>
    <style type="text/css">
        p{
            display: none;;
        }

        .show{
            display: block;
        }
    </style>
    <!--引入jQuery类库-->
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
            var $txtname=$(".txtName"); //获取jQuery对象
         var txtname=$txtname[0]; //获取DOM对象

         console.log($txtname);
         console.log(txtname);
       });
    </script>
</head>
<body >
    <p id="title">
      <a href="hello world"></a>
    </p>

    <div class="txtName">
        111111111
    </div>
</body>

</html>

4、DOM对象转jQuery对象

使用$()函数进行转换:$(DOM对象)
示例:
var txtName=document.getElementById("txtName");   //DOM对象
var $txtName=$(txtName);                          //jQuery对象
注意:
1、jQuery对象命名一般约定以$开头。
2、常使用$(this)来获取触发该事件的当前jQuery对象。

时间: 2024-10-13 03:05:37

jQuery:(一)jQuery简介的相关文章

jquery.flot.js简介

JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库,下面看一个简单的示例,先插入js: <script language="javascript" type="text/javascript&qu

jquery.easypiechart.js简介

此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: 插件下载:https://github.com/rendro/easy-pie-chart/ jquery.easypiechart.js简介,布布扣,bubuko.com

jquery.sparkline.js简介

jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery.sparkline/#docs 下载地址:http://omnipotent.net/jquery.sparkline/#download jquery.sparkline.js简介,布布扣,bubuko.com

jquery.gritter.js简介

Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网 jquery.gritter.js简介,布布扣,bubuko.com

jquery.peity.js简介

jQuery简单图表peity.js [javascript] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <script type="text/javascript" src="jQuery.js"></script> <script type="text/ja

很容易学习的JQuery库 : (一) 简介

jQuery 是一个 JavaScript 库: jQuery 极大地简化了 JavaScript 编程: jQuery 很容易学习. 上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery. 一.是什么      jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库. jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多). jQuery使用户能更

jquery flotcharts使用简介

flotcharts是一个基于jquery的,使用Canvas画HTML图表的js库. 它的使用很简单,一般情况下只要下载它的zip包,然后看它的那几个例子就知道该怎么做了,更高级一点的,可以参考一下它的文档.在我们项目的使用中,主要花了一点功夫的地方是如何让它能正确地处理和显示时间数据. 一般来说,flotcharts的使用是这样的.首先,要在页面上加上对IE 8以下Canvas的支持,然后,再加上jquery与jquery.plot的js,就像这样: <!--[if lte IE 8]>&

JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一.jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为 - 使用 jQuery 选择器能够将内容与行为分离 - 学会使用选择器是学习 jQuery 的基础 jQuery 选择器的优势 - 简洁的写法: - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用 - 支持 CSS1 到 CSS3 选择器 - jQuery 选择器支持 CSS1.CSS2 和 CSS3 选择器,同时拥有少量独

一步一步学习 JQuery (一) JQuery 对象

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 JQuery:Hello World <html> <head> <meta charset="UTF-8"> <title>Insert title here</title&

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn