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. Windows 7下java SDK下载、安装及环境变量设置

    第一步:下载Java JDK   1 登录官网站下载正版JDK   2 点击"SDK Download"进入Java JDK下载页面 注明: Java JDK和Java JRE区别 ...

  2. 非root用户下实现SSH免密码登录

    1.创建公钥.公钥 ssh-keygen -t rsa 无视它出来的任何提示,欢快的一路回车到底吧. 2.把公钥 id_rsa.pub 复制到远程机器的 /home/username/.ssh目录 并 ...

  3. maya cmds pymel polyEvaluate 获取 bounding box

    maya cmds pymel polyEvaluate 获取 bounding box cmds.polyEvaluate(bc = 1)   #模型 cmds.polyEvaluate(bc2 = ...

  4. Python中list、字典、字符串的讲解

    python 的list讲解  计算机中的数组是从0开始的 list中的下标.角标.索引说的都是一个 数组都是从0开始的. stus=["刘",“王”,“张”] stus2=[] ...

  5. 大数据技术 - 分布式文件系统 HDFS 的设计

    本章内容介绍下 Hadoop 自带的分布式文件系统,HDFS 即 Hadoop Distributed Filesystem.HDFS 能够存储超大文件,可以部署在廉价的服务器上,适合一次写入多次读取 ...

  6. Git 基本命令行操作

    一.本地仓库操作 1.初始化    git init 2.添加版本控制文件    git add README.md3.本地提交    git commit -m “1st commit”4.配置远程 ...

  7. AGC 027D.Modulo Matrix(构造 黑白染色)

    题目链接 \(Description\) 给定\(n\),要求构造一个\(n\times n\)的矩阵,矩阵内的元素两两不同,且任意相邻的两个元素\(x,y\),满足\(\max(x,y)\ \mat ...

  8. 1171 Big Event in HDU 01背包

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1171 题意:把商品分成两半,如不能均分,尽可能的让两个数相接近.输出结果:两个数字a,b且a>=b. ...

  9. python基础一 ------利用生成器生成一个可迭代对象

    #利用生成器生成一个可迭代对象#需求:生成可迭代对象,输出指定范围内的素数,利用生成器产生一个可迭代对象#生成器:本身是可迭代的,只是 yield 好比return返回,yield返回后函数冻结状态, ...

  10. servlet模板的修改

    找到myeclipse的安装目录: 找到此目录下的这个jar包 右键以压缩包的方式打开然后找到templates文件夹并打开它: 在打开的templates文件夹找到并以高级记事本打开Servlet. ...