认识jQuery（学习笔记）-优快云博客

本文链接：https://blog.youkuaiyun.com/celery_lush_sakura/article/details/79024414

本文介绍了如何在页面中引入jQuery库，并展示了jQuery的基本使用方法，包括代码风格、对象转换及解决库间冲突的技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在页面中引入jQuery

在<head>标签内引入jQuery库之后就可以使用jQuery库了；

2.jQuery代码风格

$符号一般是jQuery的简写形式；

$(document).ready(function(){})可以简写为$(function(){});

注：选择ID：$("#me")；类：$(".me")；标签：$("div")

3.jQuery对象和DOM对象

jQuery就是用jQuery包装DOM对象后产生的对象；

$("#foo").html() //获取id为foo的元素内的html代码；等同于：document.getElementById("foo").innerHTML;

获取jQuery对象，在变量前面加上$;

1）jQuery对象转成DOM对象：可以通过[index]或者get(index)方法；

var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; 或者 var cr = $cr.get(0); //DOM对象

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

2）DOM对象转成 jQuery对象：只需用$()把 jQuery对象封装起来：$(DOM对象)；

实例研究：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>1-1</title>
<style type = "text/css">
#menu { width:300PX; }
.has_children{background : #555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
div a{background:#888;display:none;float:left;width:300px;}
</style>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function(){
var $cr = $("#cr");
var cr = $cr[0];
console.log(typeof cr);
$cr.click(function(){
if (cr.checked){
alert("感谢您的支持，您可以继续操作！");
}
})
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>这是第一章</span>
<a>这是第一节</a>
<a>这是第二节</a>
<a>这是第三节</a>
</div>
<div class="has_children">
<span>这是第二章</span>
<a>这是第一节</a>
<a>这是第二节</a>
<a>这是第三节</a>
</div>
<div class="has_children">
<span>这是第三章</span>
<a>这是第一节</a>
<a>这是第二节</a>
<a>这是第三节</a>
</div>
</div>
<input type = "checkbox" id="cr"><label for = "cr">我已经阅读了上面制度。</label>
<script type = "text/javascript">
$(".has_children").click( function(){ 
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a")
.hide();
});
</script> 	
</body>
</html>

4.解决jQuery库和其他库的冲突

4.1.jQuery库在其他库之后导入：

所有库加载完毕后，调用jQuery.noConflict()函数，将变量$的控制权转移给其他JavaScript库；

<script language = "javascript">
jQuery.noConflict();
</script>

4.2.jQuery库在其他库之前导入：

<script language = "javascript">