Dom与JQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title ></title>
<style type="text/css">
.myDiv
{
border: 1px solid black;
padding: 10px ;
width: 500px ;
height: 80px ;
}
</style >
<script src="Js/jquery-1.5.1.js" type="text/javascript"></ script>
<script type="text/javascript">
//以下两段内容四次显示结果顺序为：
//a结果：jquery null ===> (图片未出来)b结果：ready嘿嘿嘿 ===>(图片出来之后)c结果：onload嘿嘿嘿====>c中的jquery:onload中的jquery嘿嘿嘿
//dom方式 为Window对象的onload事件 设置了一个匿名方法
//c、这个匿名方法 是在页面所有的资源加载完毕后 才被调用
window.onload = function () {
//1、dom方式 返回的是dom节点对象
var div = document.getElementById("imgAfter" );
alert( "onload" + div.innerHTML);
//2、Jquery方式 返回的是jquery对象
alert( "onload中的jquery" + $("#imgAfter" ).html());
}
//a、直接写在Script标签中的js代码最先 被浏览器执行 Body还未加载完成 所以显示null
//alert("onload中的jquery" + $("#imgAfter").html());
//b、Jquery的ready方法，是当dom树 完全生成后才执行 body中的图片还没有出来就会显示
//3、Jquery注册事件函数一定要知道格式
$(document).ready( function () {
$( "#imgAfter").html("嘿嘿黑" );//jquery中的Id选择器
alert( "ready" + $("#imgAfter" ).html());
});
//4、以上jqery事件注册代码可简写为
$( function () {
$( "#imgAfter").html("嘿嘿黑" ); //html()无参即读取 有参即设置
alert( "ready" + $("#imgAfter" ).html());
});
$( function () {
//5、将dom元素转换成为jqeury对象 就可以使用jquery方法了
var div = document.getElementById("div" );
var $div = $(div); //核心 Jquery类型变量一般加$前缀
$div.html( "123被修改了" );
//6将jquery对象转换成为dom元素 两种方式1索引 2get()
var div = document.getElementById("div" );
var $div = $(div);
var divret = $div.get(0); //$div[0];从jquery对象中 获得指定下标的dom元素
alert(divret.innerHTML);
//7 get()获取dom元素 解释jquery对象结构 详见图示
var $divs = $("div" ); //jquery中的标签选择器 获得页面上所有的div 并且将他们添加到了jquery对象的dom数组中
alert($divs.get(1).innerHTML); //这里是非常重要的 get返回的是数组对象即dom元素 而不是jquery对象 将jquery对象里的第二个dom对象读取出来
alert( "直接写在js中的jquery" + $("#imgAfter").html());
//8基本选择器------------------------------------
//8.1 id选择器
var $div = $("#div" );
//8.2 元素选择器
var $divs = $("div" );
//8.3 类选择器
var $divCls = $(".myDiv" );
for (var i = 0; i < $divCls.length; i++) {//这种循环用的很少 因为Jquery本身提供了
$divCls.get(i).style.backgroundColor = "gray";
}
//8.4 "*"选择器 返回页面所有元素 用于结合上下文搜索
var $all = $("*" );
alert($all.length); //19个元素
//8.5多条件选择器
var $Any = $("input,span" ); //注意用逗号分隔
alert($Any.length); //长度为4
//9层次选择器---------------------------------------
//9.1 后代选择器 得到id为FatherDiv中的子div及其子div中的所有div
var $GSonDiv = $("#FatherDiv div" );//中间用空格区分开
for (var i = 0; i < $GSonDiv.length; i++) {
alert($GSonDiv.get(i).id); //son1 son2 grandSon都会得到
}
//9.2 子代选择器 只取直属子元素
var $SonDiv = $("#FatherDiv > div" );
for (var i = 0; i < $SonDiv.length; i++) {
alert($SonDiv.get(i).id); //son1 son2
}
//9.3后面的兄弟选择器 必须是紧接着 否则什么都取不到
var $AfterDiv = $("span + div" );//匹配所有紧接在span后的next元素 next必须是div
for (var i = 0; i < $AfterDiv.length; i++) {
alert($AfterDiv.get(i).id); //span标记之后紧跟的div id 结果FatherDiv
}
var $AfterDiv = $("span + *" );
for (var i = 0; i < $AfterDiv.length; i++) {
alert($AfterDiv.get(i).id); //span标记之后紧跟元素 id *号意味不限制紧跟的元素类型 结果FatherDiv
}
//9.4匹配元素时候的所有同级元素
var $ssElements = $("#FatherDiv ~ div" );
for (var i = 0; i < $ssElements.length; i++) {
alert($ssElements.get(i).id); //AfterDiv AfterDiv2
}
//9简单事件
$( "#btn").click(function () {
$( "div").html("我们都是div" );
});
$( "#btn").click();//这里就是事件的调用 所以页面刚加载就会触发这个事件
});
</script >
</head>
<body>
<div id="div">
<input type="button" value="按钮1" id="btn" />
123
</div >
<!--<img src="images/照片123.JPG" />-->
<div id="imgAfter">
哈哈哈
<input type="button" value="按钮2" />
</div >
<span >我是span</ span>
<div id="FatherDiv">
<div id="son1" class="myDiv">
类选择器1
<input type="button" value="按钮3" />
</div>
<div id="son2" class="myDiv">
还是类选择器 他们有class属性
<div id="grandSon">
孙子级的div
</div>
</div>
</div >
<div id="AfterDiv"> 紧接着的兄弟元素 </div>
<div id="AfterDiv2"> 紧接着的兄弟元素2 不会取到 </div>
</body>
</html>
代码直接拷贝到html文件中，并确定jquery-1.5.1.js文件外联存在即可看到运行效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
