1.下载

下载地址：http://jquery.com/download/

jquery-3.2.1.js——用于开发和学习（229K）

jquery-3.2.1.min.js——用于项目和产品（31K）

2.引入jQuery.js

<head>

<meta charset="UTF-8">

<title></title>

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

<script src="js/jquery-3.2.1.min.js"></script>

</head>

3.编写jQuery代码

<script type="text/jscript">

   $(document).ready(function(){

      <!--语句体-->

      alert("0000000001");

     });

    <!--简写-->

   $(function(){

    <!--语句体-->

       alert("0000000002");

    });

</script>
结论：网页中所有DOM绘制完毕后执行，可能元素关联的东西并没有加载完，前后同时输出

4.DOM对象——Document Object Model,文档对象模型。DOM树，用来构建一个基本网页。

<h3>\<p>/<ul><li>子节点都是DOM元素节点。

获得DOM对象：

var domObj=document.getElementById("id");

使用JavaScript中的属性——innerHTML：

var ObjHTML=domObj.innerHTML;

5.jQuery对象——通过jQuery包装DOM对象后产生的对象。.jQuery对象只能使用.jQuery对象方法。

获取id为foo的元素内的html代码。html()是.jQuery方法，如下：

$("#foo").html();

等同于

document.getElementById("foo").innerHTML;

6.jQuery对象和DOM对象的相互转换

如果获取的对象是——jQuery对象，那么在变量前加$.

var $variable=jQuery对象;

如果获取的对象是——DOM对象

var variable=DOM对象;

(1)jQuery对象——转——DOM对象

方法一：jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。

var $cr=$("#cr");      //jQuery对象

var cr=$cr[0];         //DOM对象

alert(cr.checked);     //检测checked是否被选中了

方法一：jQuery方法，通过get(index)方法得到相应的DOM对象。

var $cr=$("#cr");      //jQuery对象

var cr=$cr.get(0);     //DOM对象

alert(cr.checked);     //检测checked是否被选中了

(2)DOM对象——转——jQuery对象

方法：只要用$()把DOM对象包装起来，就可以获得一个jQuery对象；方式为$(DOM对象)

var cr=docment.getElentById("cr");    //DOM对象

var $cr=$(cr);                        //jQuery对象

1.5 jQuery库和其它库的冲突

（1）jQuery库在其他库之后导入

方法一：在jQuery第一行，调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库；

方法二：用其它快捷字母代替$，自定义一个快捷方式。

语法： var 其它快捷字母代替$=jQuery.noConflict();

var $j=jQuery.noConflict();             //自定义一个快捷方式

        $j(function(){                  //使用jQuery，利用自定义快捷方式——$j

            $j("p").click(function(){

                alert($j(this).text());

            })

        })

 $("pp").style.display='none';          //使用prototype.js隐藏元素

可以自定义备用名称，如jq\$j\awesomequery等。

问题：如果不想给jQuery自定义名称，还想使用$而不管其他库的$（）方法，同时又不想与其它库相冲突。

解决方法一：

jQuery.noConflict();          //将变量$的控制权让渡给prototype.js

jQuery(function($){           //使用jQuery设定页面加载时执行的函数

     $("p").click(function(){  //在函数内部继续使用$()方法

          alert($(this).text());

     })

})

$("pp").style.display='none';         //使用prototype.js隐藏元素

解决方法二：

jQuery.noConflict();                  //将变量$的控制权让渡给prototype.js

(function($){                         //定义匿名函数并设置形参为$

    $(function(){                     //匿名函数内部的$均为jQuery

       $("p").click(function(){       //继续使用$()方法

          alert($(this).text());

       })

    })

})(jQuery);                           //执行匿名函数且传递实参jQuery

$("pp").style.display='none';         //使用prototype.js隐藏元素

（2）jQuery库在其他库之前导入

可以直接使用“jQuery”来做一些jQuery工作。同时使用$（）方法作为其他库的快捷方式，无需调用jQuery.noConflict()函数。如下：

jQuery(function(){                //直接使用jQuery，无需调用jQuery.noConflict()函数

     jQuery("p").click(function(){

          alert(jQuery(this).text());

     })

})

$("pp").style.display='none';   //使用prototype.js隐藏元素

jQuery 学习（1）——认识jQuery的更多相关文章

  1. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  5. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  6. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  7. JQuery学习使用笔记 -- JQuery插件开发

    内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...

  8. jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...

  9. jQuery学习笔记（jquery.ui插件）

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  10. jQuery学习笔记（jquery.simplemodal插件）

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

随机推荐

  1. BZOJ4675

    题解: 考虑这么一件事情,n个人买彩票,在不断抽走卡片的时候,他们的中奖概率是不变的 所以在这道题中,由于每个人的操作次数是确定的,所以选每k个点的概率是相同的(因为如果我们逐一考虑每一次操作这个问题 ...

  2. python之squid实现免费 IP代理 (windows win7 单机 本机 本地 正向代理 区分 HTTPS)

    0.目录 1.思路2.windows安装3.相关命令行4.简单配置和初步使用5.问题:squid是否支持HTTPS6.问题:配置多个代理条目,相同ip不同port报错7.问题:根据代理请求区分HTTP ...

  3. [转]pyCharm最新2018激活码

    https://blog.csdn.net/u014044812/article/details/78727496 因公司的需求,需要做一个爬取最近上映的电影.列车号.航班号.机场.车站等信息,所以需 ...

  4. centos 6.8 安装git 报错

    报错信息: Can't locate ExtUtils/MakeMaker.pm in @INC (@INC contains: /usr/local/lib64/perl               ...

  5. weblogic弱密码检测

    http://www.secbox.cn/hacker/tools/6252.html http://60.12.168.73:8088/console/login/LoginForm.jsp htt ...

  6. 使用spark操作kudu

    Spark与KUDU集成支持: DDL操作(创建/删除) 本地Kudu RDD Native Kudu数据源,用于DataFrame集成 从kudu读取数据 从Kudu执行插入/更新/ upsert ...

  7. web项目部署以及放到ROOT目录下

    最近度过了一个国庆长假,好几天都没有写博客了! 发布这篇案例也是希望能帮助到像我一样的菜鸟o(*￣︶￣*)o,百度上面的资料都不怎么全.也没有人说明注意事项.总是这篇说一点.那个人也说补一点,最后自己 ...

  8. kafka工作流程| 命令行操作

    1.  概述 数据层:结构化数据+非结构化数据+日志信息(大部分为结构化) 传输层:flume(采集日志--->存储性框架(如HDFS.kafka.Hive.Hbase))+sqoop(关系型数 ...

  9. ActiveMQ挂了，重启一直无法将所有实例启起来的问题

    背景 2017年3月29日  下午2-3点时分,工单模块无法访问.跟踪日志发现,ActiveMQ连接不上导致整个工单模块瘫痪: 首先判断可能是系统需要然后尝试重启工单模块,重新启动工单模块,结果:重启 ...

  10. hexo博客pure主题解决不蒜子计数不显示的问题

    最近在建个人博客网站,想统计自己的博客页面访问量,就用到了不蒜子页面访问统计.可是遇到了糟心事,居然不显示!!! 不蒜子官网示例:两行代码,搞定计数 <script async src=&quo ...