jQuery讲解(一)
?
<!-- 引入jquery文件 --><script type="text/javascript" src="./js/jquery-1.4.4.js"></script> <script type="text/javascript"> /**第一步加载html页面*/ // window.onload = function(){};//加载html 并且加载外部所有的引用文件(图片,css样式,js等) /**Jquery*/ //window --->location /history/document/Na... //DOM对象 是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法 //但是它们之间可以相互转换 //那又是怎么转换的呢? /** 讲解第一种:DOM对象转换成Jquery对象的方式 1、对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象 var document = window.document;//DOM对象 实现转换方式如下： var $document=$(document);//$()从哪里来 到底从哪里来？ */ /**Jquery的页面载入事件处理方式 */ $(document).ready(function ());<!-- 引入Jquery的文件 --><script type="text/javascript" src="./js/jquery-1.4.4.js"></script><script>/** 在这里重点介绍： 一：Jquery中的基本选择器 1、id选择器 2、class选择器 3、元素选择器器 4、* 5、并列选择器 用英文的逗号区分 二：重点介绍了Jquery对象转换成DOM对象的方法 1、Jquery对象返回的是一个数组对象可以采用如下方式转换 var domObject = $("#thed")[0]; 2、可以采用Jquery中get(index)方法获取 get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象 三：重点介绍Jquery对象中的get(index)方法,size()方法,length属性*/ $(document).ready(function(){ //ID匹配的选择器Jquery对象 //alert($("#thed")); /**转换成DOM对象的方式 1、Jquery对象返回的是一个数组对象可以采用如下方式转换 var domObject = $("#thed")[0]; */ alert(($("#thed")[0]).innerHTML); //class匹配选择器Jquery对象 alert($(".rdc"));}) /** 2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取 get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象 */ var domObject = $(".rdc").get(0); alert(domObject.innerHTML); //* 匹配所有的元素的Jquery对象 alert($("*")); alert($("*").get(0).innerHTML) //根据给定的元素名称获取Jquery对象 alert($("tr")); /**采用第一种方式把$("tr")转换成DOM对象*/ alert(($("tr")[$("tr").size()-1]).innerHTML); alert(($("tr")[$("tr").length-1]).innerHTML); //匹配所有选择器的Jquery组合对象 alert($("tr,tr.rdc")); alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML) });</script><style> #thed{ background-color: blue; } .rdc{ background-color: red; } #tbdy rdc{ }</style></head><body><div><div><h1>选择器的使用方式</h1></div><div><table border="1px" cellpadding="0" cellspacing="0"><thead><tr id="thed"><th>序号</th><th>名称</th><th>邮箱</th></tr></thead><tbody id="tbdy"><tr content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="./js/jquery-1.4.4.js"></script> <script> /** 层次元素关系 1、祖先关系 空格符号 2、父子关系 大于符号 3、紧跟的关系 +符号 4、紧跟后的所有兄弟关系 ~符号 CSS样式 1、css("");带有一个参数是获取其属性的值 2、css("","");为其对象设置一个指定的属性和属性值 3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...}; */ $(document).ready(function(){ /**层级元素选择器的使用方式*/ /**祖先关系 符号为===>空格*/ var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象 /**输出Jquery对象的大小*/ alert("后代个数是："+$frmipts.size()); /**父子关系 符号为===>>*/ var $ipt = $("form>input"); //为你获取的input添加背景颜色 /**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/ var iptt = $ipt[0]; iptt.style.backgroundColor="red"; alert("-----------改变中介线---------------"); /**采用Jquery对象本身的css方法来设置样式*/ $ipt.css("background-color","blue"); /**匹配所有紧接在某个元素后的某个元素 符号为===> +*/ var $lipts=$("label+input"); /**为其添加背景颜色*/ $lipts.css("background-color","green"); /**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/ var $fipts = $("form~input"); $fipts.css("background-color","yellow"); /**我使用到了CSS样式 .css("")//获取其样式属性的值 案例： $fipts.css("background-color"); .css("","") //为其添加样式属性及属性值 $fipts.css("background-color","yellow"); .css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。 $fipts.css({"background-color":"red","color":"blue"}); */ alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color")); }); </script></head><body><div><div> <input name="ddd"/><h1>层级选择器的使用方式</h1></div><div id="#frm"> 邮箱：<input name="test"/><form><label>Name:</label><input name="name"/><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset><label>Age:</label><input name="age"/></form><label> 周星驰:</label><br/>姓名：<input name="none" /><br/></div></div></body></html>?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入Jquery的js文件 --> <script type="text/javascript" src="./js/jquery-1.4.4.js"></script><script> /** 简单选择器 1、：first 匹配的第一个 2、：last 匹配的最后一个 3、：lt(index) 小于某个的 4、：gt(index) 大于某个的; 5、：eq(index) 等于某个 相当于过滤器中的.eq(index) 6、：even 奇数行 7、：odd 偶数行 8、：header 匹配h1,h2 h3 等标题 9、：not 除去匹配的(剩下的) 过滤器： .eq(index)匹配某个 属性中html代码 .html()返回整个html文本 属性的文本 .text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回 //纠正：开始讲的过滤器 */ /**页面载入事件处理*/ $(function(){ //获取class类别选择器JQuery对像集合中的第一个对象 var $tr1 = $(".rdc:first"); //属性：.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 alert($tr1.html()); //获取class选择器对象集合中的最后一个对象 var $ltr = $(".rdc:last"); //属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 alert($ltr.text()); /** even匹配的是索引是:0 2 4 但行数是1,3 5...... :even 选择奇数行并且为其添加背景颜色为红色*/ $("tr:even").css("background-color","red"); /** :odd 选择偶数行并且为其添加背景颜色为蓝色*/ $("tr:odd").css("background-color","blue"); /**$("tr")取得所有的行的JQuery对象的集合 .eq(index)匹配一个给定索引值的元素的Jquery对象 .css("","")为Jquery对象添加一个样式属性和属性值 对象链式操作*/ $("tr:eq(2)").css("background-color","yellow"); //等效于 $("tr").eq(2).css("background-color","yellow"); /**集合 List --->get(index)--->具体的对象--->具体对象的方法*/ /**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/ $("tr:lt(1)").css("background-color","green"); /**取得索引大于1 并且把背景颜色设置为black*/ $("tr:gt(1)").css("background-color","black"); //匹配不是最后一行的样式背景颜色统一设置为红色 $("tr:not(:last)").css("background-color","red"); //匹配标题 alert($(":header").html()); }); </script> </head> <body> <div align="center"> <div> <h1>简单选择器的应用------过滤器</h1> </div> <div><table border="1px" cellpadding="0" cellspacing="0"><thead><tr id="thed"><th>序号</th><th>名称</th><th>邮箱</th></tr></thead><tbody id="tbdy"><tr class="rdc"><td>1001</td><td>redarmy_chen</td><td>redarmy_chen@qq.com</td></tr><tr><td>1002</td><td>l_j</td><td>redarmy_chen@qq.com</td></tr><tr class="rdc"><td>1003</td><td>m_j</td><td>redarmy_chen@qq.com</td></tr><tr><td>1004</td><td>x_j</td><td>redarmy_chen@qq.com</td></tr></tbody></table></div> </div> </body></html>?