一、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类名选择

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>第一个JQuery程序</title>

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

    <script>

       $(document).ready(function(){

           alert("这是编写的第一个JQuery程序");

       });

    </script>

</head>

<body>

</body>

</html>

五、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对象。

jQuery:（一）jQuery简介的更多相关文章

  1. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  2. [转]Jquery Validate用法简介

    原文链接:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 正文: 官网地址:http://bassistance.de/ ...

  3. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  4. jQuery初探 jQuery选取和操纵元素的特点

    jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...

  5. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  6. jQuery - 2.jQuery选择器

    1.id 选择器 2.标签选择器 3.类选择器 4.复合选择器 5.层次选择器 JQuery的迭代   JQuery选择器 JQuery选择器用于查找满足条件的元素,比如可以用$("#控件I ...

  7. jQuery-认识JQuery，jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  8. jQuery extend() & jQuery.fn.extend()，插件编写

    资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...

  9. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  10. webpack+react+jquery和jquery插件

    要引入jquery插件 全局引入jquery plugins : [new webpack.ProvidePlugin({ $: 'jquery', jQuery:'jquery' "win ...

随机推荐

  1. Bootstrap3.1开发的响应式个人简历模板

    在线演示 使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...

  2. CSS如何实现自定义鼠标应用到整个网页

    在CSS区把body改为*即可.但是注意Firefox不支持ani和cur文件,如果您一定想使用ani和cur的指针,可以试着将它改名为.gif文件.实际测试如果改为gif则IE也不支持了.

  3. Python编程-基础知识-python项目包和文件的管理以及如何引用相对路径的包和模块

    目录 结构: core |____ __init__.py |____ basic |____ __init__.py |____ database           |____ __init__. ...

  4. vue常用属性解释。

    props:详看 示例-网格组件. props 可以是数组或对象,用于接收来自父组件的数据.props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测.自定义校验和设置默认值 ...

  5. Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上，针对大访问量网站的需求，添加了很多高级功能和特性

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...

  6. IO核心代码

  7. react 调用项目中的 .html 文件

    (1)将 html 文件 放于 public 文件夹下 (2)window.open('about:blank').location.href="http://localhost:3000/ ...

  8. javascript 图片预加载

    <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

  9. 使用RMAN方式清除

    使用RMAN方式清除 RMAN清除方式会自动清除磁盘上的归档日志文件,同时会释放控制文件中对应的归档日志的归档信息. 可以基于不同的条件来清除归档日志,如基于SCN,基于SEQUENCE,基于TIME ...

  10. axure rp 8.0

    授权人:University of Science and Technology of China (CLASSROOM) 授权密钥:DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0 ...