1. dom对象和jquery对象 7
dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象
jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。
1.1 dom对象可以和jquery对象相互的转换。7
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get（0）
1.1.1 为什么要进行dom和jquery的转换：7
目的是要使用对象的方法，或者方法。
当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
1.2 案例 8
1.2.1 DOM 对象 转 jQuery 对象为 8
使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以
使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了
与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
例：
代码在E:\java学习\jQuery\course\course2
domTojQuery.html
<!-- dom对象转为jQuery 8 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转为jQuery</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn");
//使用dom的value属性,获取值
//alert("使用dom对象的属性="+obj.value)
//把dom对象转jquery,使用jquery库中的函数
var jobj = $(obj);
//调用jquery中的函数,获取value的值
alert(jobj.val())
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮~~" onclick="btnClick()" />
</body>
</html>
1.2.2 jQuery 对象转为 DOM 对象 9
jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM 对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]
代码在E:\java学习\jQuery\course\course2
jqueryTodom.html
<!-- jQuery 对象转为 DOM 对象 9 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 对象转为 DOM 对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用jquery的语法,获取页面中dom对象
//var obj = $("#txt")[0];//从数组中获取下标为0的dom对象
var obj = $("#txt").get(0);//从数组中获取下标为0的dom对象
//alert("obj.value")
var num = obj.value;
obj.value = num * num;
}
</script>
</head>
<body>
<div>
<input type="button" value="计算平方" onclick="btnClick()" /><br>
<input type="text" id="txt" value="整数" />
</div>
</body>
</html>
2. 选择器：10
就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
常用的选择器：
1） id选择器， 语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $("标签名称")
使用标签名称定位dom对象的
4）所有选择器 11
语法：$(“*”) 选取页面中所有 DOM 对象。
5）组合选择器 12
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签 名等。
语法：$(“id,class,标签名”)
代码在E:\java学习\jQuery\course\course2
selector.html
<!-- 选择器 10 -12 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
background: gold;
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//id选择器
var obj = $("#one");
//使用jquery中改变样式的函数
obj.css("background","red");
}
function fun2(){
//使用样式选择器
var obj = $(".two");
obj.css("background","yellow");
}
function fun3(){
//标签选择器
var obj = $("div"); //数组有3个对象
//jquery的操作都是操作数组中的全部成员.
//所以是给所有的div都设置的背景色
obj.css("background","blue");
}
function fun4(){
//所有选择器 11
var obj = $("*");
obj.css("background","green");
}
function fun5(){
//组合选择器 12
var obj = $("#one,span");
obj.css("background","red");
}
</script>
</head>
<body>
<div id="one">我是one的div</div>
<br/>
<div class="two">我是样式是two的div</div>
<br/>
<div>我是没有id，class的div</div>
<br/>
<span class="two">我是span标签</span>
<br/>
<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
<br/>
<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
<br>
<input type="button" value="使用标签选择器" onclick="fun3()" />
<br/>
<input type="button" value="所有选择器" onclick="fun4()"/>
<br/>
<input type="button" value="组合选择器" onclick="fun5()"/>
</body>
</html>
