主要学习jQuery对象的获取:
一、jQuery核心函数--jQuery():
以例子为主,首先是页面:
<div id="yzw" οnclick="test();">你好,JQuery!</div>
具体 js的写法:
//页面初始化加载 $(function (){ alert("页面加载完毕"); //获取所有的<div.../> 标签对应的DOM对象 $("div").append("新增的内容"); //使用HTML字符串创建一个DOM对象,并将其放入body元素内 $("<input type='button' value='按钮'/> ").appendTo(document.body); //直接将一个DOM对象包装称jQuery对象 $(document.getElementById('yzw')).css("background-color","#fffff").css("border","1px solid balck"); });
其中 $(function (){
}); 函数用于页面初始化,非常常用。
二、以CSS访问器访问DOM元素
具体方法太多,只书写了一些常用的实例:
页面元素:
<ul>
<li id="java">java</li>
<li id="javaee" class="test">javaee</li>
<li id="ajax">ajax</li>
<li id="xml">xml</li>
<li id="ejb">ejb</li>
<li ><span id="workflow">workfolw</span></li>
</ul>
响应的js:
//以CSS选择器访问DOM元素 $("#java").append("<b> 是 id为java的元素"); //获取所有包含id属性的<li.../>元素,为他们增加背景颜色 $("li[id]").css("background-color","#bbbbff"); //获取class属性为test的元素,并为他们增加边框 $(".test").css("border","3px dotted black"); //同时获取id 为 xml,workflow的元素 $("#xml,#workflow").append("<b>获得id 为xml,workflow 的元素</b>"); //同时获取id 为xml,workflow的元素 $("ul #workflow").append("<br/><b>位于ul之内的,id为workflow的元素"); // $("ul>#ajax").append("<b>ul之内,id为ajax的子元素</b>"); //获取id为ajax之后的所有li元素 $("#ajax~li").css("background-color","#ff5555");
三、选择器和附加限定词混合使用
html页面和以前一样
js如下:
//访问ul中li的第一个元素 $("ul>li:first").append("<b>是ul元素之内的第一个li子元素</b>"); //访问ul元素之内没有id属性的li子元素 $("ul>li:not([id])").append("<b>是ul之内没有id属性的元素</b>"); $("ul>li:even").append("ul元素中索引为奇数的li子元素").css("background-color","yellow"); $("ul>li:gt(4)").append("<br/><b>是ul元素之内,索引大于4的li子元素</b>").css("border","1px dashed black"); //访问ul元素之内且包含span元素的li子元素 $("ul>li:has('span')").append("<br/><b>是ul元素之内,且包含span元素的li子元素</b>"); //访问li元素之内且可见的span子元素 $("li>span:visible").append("<br/><b>是ul元素之内,且可见的span子元素</b>").css("background-color","#bbbbbb");
还有一些比较特殊的附件限定词:
//访问页面中的第1、4、7...个li元素 $("li:nth-child(3n+1)").css("border","1px dashed black"); // $("span:only-child").append("<b>是作为父元素唯一子元素的span元素</b>"); // 测试:first和:first-child之间的关系 alert($("ul>li:first").html()==$("ul>li:first-child").html()); //返回true
以上介绍到此。