jQuery核心函数得作用
核心函数的4个作用 : 根据传给核心函数参数不同一共有以下四个作用 重点
1.传入参数为[函数]时：在文档加载完成后执行这个函数 window.onload = function(){}
2.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
3.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象 重要
//$是jquery 的内容，执行后返回的对象和dom查找的原生对象不同，只能调用jqueryapi中的方法或属性
4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
//dom对象： 通过原生的js的HTML DOM查找的对象都是dom对象[document的三个方法]，只能调用w3c中的dom方法
//jquery对象： 通过$包装过或查找到的就是jquery对象,只能调用jquery api的方法
下面测试核心函数的作用，也就是和原生DOM的不同（重点）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>核心函数的作用</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//$是什么? 核心函数：jquery的功能基本都是通过$实现的
//alert($);
//核心函数的4个作用 : 根据传给核心函数参数不同一共有以下四个作用 重点
//1.传入参数为[函数]时：在文档加载完成后执行这个函数 window.onload = function(){}
$(function(){
//操作页面的标签
//2.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
var $aEle = $("<a href='#' >点我</a>"); //"<li id="bj">北京</li>"
//将创建的元素对象追加到body标签最后
$("body").append($aEle);
//3.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象 重要
alert($("#bj").text());//$是jquery 的内容，执行后返回的对象和dom查找的原生对象不同，只能调用jqueryapi中的方法或属性
//4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
//dom对象： 通过原生的js的HTML DOM查找的对象都是dom对象[document的三个方法]，只能调用w3c中的dom方法
//jquery对象： 通过$包装过或查找到的就是jquery对象,只能调用jquery api的方法
var bjEle = document.getElementById("bj");
var $bjEle = $(bjEle);//jquery对象推荐使用$开始命名
alert(bjEle.innerHTML);
alert($bjEle.text());
});
</script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</body>
</html>Dom对象和jQuery对象：
dom对象：js实现的HTML DOM 封装，都是dom对象通过原生的HTML DOM ，api查找到的都是dom对象
jquery对象： 通过$查找 或包装过的就是jquery对象，
jquery是js的框架，底层功能还是通过原生的dom方式实现的,不能离开js
区别：
1、变量名命名规范： jquery对象推荐使用$开始命名
2、各自只能调用自己的方法（方法不是通用的）
3、dom对象和jquery对象的转换：
dom对象转jquery对象：能够使用框架的方法 $(domObj);
jquery对象转dom对象： jquery有些功能实现不了，需要使用dom标准实现
$()在查找标签时 或将dom对象转为jquery对象时，就是创建了一个集合 将所有的dom对象存到集合中
jquery对象的本质：dom对象的集合
- 通过下标可以取出指定索引位置的dom元素
- $jqueryObj[0]
下面测试实现
使用DOM对象调用DOM方法
使用DOM对象调用jQuery方法
使用jQuery对象调用jQuery方法
使用jQuery对象调用DOM方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象和jQuery对象</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//分别使用DOM对象和jQuery对象获取div中的文本
/*
dom对象： js实现的HTML DOM 封装都是dom对象
通过原生的HTML DOM api查找到的都是dom对象
jquery对象： 通过$查找 或包装过的就是jquery对象
jquery是js的框架，底层功能还是通过原生的dom方式实现的,不能离开js
区别：
1、变量名命名规范： jquery对象推荐使用$开始命名
2、各自只能调用自己的方法
3、dom对象和jquery对象的转换：
dom对象转jquery对象：能够使用框架的方法
$(domObj);
jquery对象转dom对象： jquery有些功能实现不了，需要使用dom标准实现
$()在查找标签时 或将dom对象转为jquery对象时，就是创建了一个集合 将所有的dom对象存到集合中
jquery对象的本质：dom对象的集合
- 通过下标可以取出指定索引位置的dom元素
- $jqueryObj[0]
*/
//1、使用DOM对象调用DOM方法
var btn01 = document.getElementById("dom2dom");
var div = document.getElementById("testDiv");
btn01.onclick = function(){
alert(div.innerHTML);
alert(div);//object HTMLDivElement
};
//2、使用DOM对象调用jQuery方法
var btn02 = document.getElementById("dom2jQuery");
btn02.onclick = function(){
alert($(div).text());//调用失败
};
//3、使用jQuery对象调用jQuery方法
var $div = $("#testDiv");
$("#jQuery2jQuery").click(function(){
alert($div.text());
alert($div);//object Object
});
//4、使用jQuery对象调用DOM方法
$("#jQuery2dom").click(function(){
//alert($div.innerHTML);
//alert($("button").size());
//遍历jquery对象，取出每个位置的dom对象
var $btns = $("button");
for(var i=0;i<$btns.length;i++){
alert($($btns[i]).text());
}
});
});
</script>
</head>
<body>
<div id="testDiv">学习嘛，慢慢来！</div>
<br/>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>