一、正确使用jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery入门</title>
<style type="text/css">
#d1{
width: 200px;
height: 200px;
background-color: aqua;
}
#d2{
width: 200px;
height: 200px;
background-color: aqua;
}
body{
margin: 0;
padding: 0;
}
</style>
<!-- 1.引入jQuery的类库 -->
<script src="js/jquery.min.js"></script>
<!-- 2.书写jQuery的代码 -->
<script type="text/javascript">
//jQuery加载文档
$(function(){
//1)如何获取id为d1的元素
var d1=document.getElementById("d1"); //js的做法
d1.innerText="<span>abd</span>" //不能识别html属性<span>直接输出
// d1.innerHTML="<span>abd</span>" //可以识别html属性 <span>
//jQuery的做法
var d2= $("#d2");
d2.text("xyz");
});
</script>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
</html>
运行效果图如下:
二、 对象间的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象和DOM对象转换</title>
<!-- 1.引入jQuery的类库 -->
<script src="js/jquery.min.js"></script>
<!-- 2.书写jQuery的代码 -->
<script type="text/javascript">
//jQuery加载文档
$(function(){
//1)js 获取的是DOM对象
var dom=document.getElementById("d1");
//2)jQuery 获取的是jQuery对象
var jq=$("#d1");
dom.innerText="abc";
jq.text("xyz");
//JQ对象转换成DOM对象
jq[0].innerText="xyz";
//DOM对象转换成JQ对象
$(dom).text("111");
});
</script>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
</html>
运行效果如下:
三、jQuery选择器的使用
选择器分为:ID选择器、class选择器、元素选择器、层级选择器等。
选择器的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象和DOM对象转换</title>
<!-- 1.引入jQuery的类库 -->
<script src="js/jquery.min.js"></script>
<!-- 2.书写jQuery的代码 -->
<script type="text/javascript">
//jQuery加载文档
$(function(){
//jQuery的ID选择器获取元素
var a1=$("#d1");
console.log(a1);
//JQ的class选择器获取元素
var a2=$(".c1");
console.log(a2);
//JQ的元素选择器获取元素
var a3=$("p");
console.log(a3);
//JQ的层级选择器获取元素
var a4=$("ul li");
console.log(a4);
for(var i=0;i<a4.length;i++){
alert(a4[i].innerText);
}
var a5=$("ul>li");
console.log(a5);
for(var i=0;i<a5.length;i++){
alert(a5[i].innerText);
}
});
</script>
</head>
<body>
<h2>jQuery选择器</h2>
<div id="d1">id选择器</div>
<div class="c1">class选择器</div>
<div class="c1">class选择器</div>
<p>标签选择器1</p>
<p>标签选择器2</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<ol>
<li>5.1</li>
<li>5.2</li>
</ol>
</ul>
</body>
</html>
运行效果如下: