使用jquery之前必须先引入jquery的js文件,如下:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
DOM对象与jquery对象的之间的关系:
DOM对象 是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法
Jquery对象转换成DOM对象的方法
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
2、可以采用Jquery中get(index)方法获取
get(index)取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个
:DOM对象转换成Jquery对象的方式
对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
var document = window.document;//DOM对象
实现转换方式如下:
var $document=$(document);
下面介绍几种简单的选择器
内容选择器
:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结:在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
简单选择器
: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");
/**
dd 选择偶数行并且为其添加背景颜色为蓝色*/
$("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>
层次元素关系
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>
另外介绍一下表单对象的属性:
:checked :匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:disabled:匹配所有不可用元素
:enabled匹配所有可用元素
:selected 匹配所有选中的option元素
分享到:
相关推荐
浅谈jQuery的应用.pdf 对于入门jquery很有帮助
浅谈JQuery如何控制页面.pdf
本文给大家分享的是个人关于jQuery中事件的理解,主要向大家介绍了jQuery中事件的绑定,合成、以及事件冒泡、阻止事件等内容,希望大家能够喜欢。
实例如下: var roleidArray = new Array(""); for(i = 0;...以上这篇浅谈jquery拼接字符串效率比较高的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
1. map()方法 //找到所有的标题元素,映射它们的ID,并转化为数组后排序 ...以上这篇浅谈jquery的map()和each()方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名来查找DOM元素。这个非常重要,下面的内容都是以此为基础,逐级提高...
我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的。 ...就是当请求为非 ... 在ASP.NET中我们用 Request.ServerVariables[REQUEST_METHOD] == ...以上这篇浅谈jquery中ajax跨
主要介绍了浅谈jQuery事件绑定原理,并做了简单分析,然后用实例来展示,需要的朋友可以参考下
做文件上传,需要将表单元素的enctype设置为’multipart/form-data’,用...以上这篇浅谈jquery采用attr修改form表单enctype不起作用的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支
下面小编就为大家带来一篇浅谈jquery中使用canvas的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈JQuery+ajax+jsonp 跨域访问。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了浅谈jQuery中setInterval()方法,十分的简单实用,有需要的小伙伴可以参考下。
下面小编就为大家带来一篇浅谈jQuery 中的事件冒泡和阻止默认行为。小编举得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery框架Ajax常用选项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery中ajaxPrefilter的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery中的checkbox问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery添加的HTML,JS失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈jQuery animate easing的具体使用方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家分享一篇浅谈jquery fullpage 插件增加头部和版权的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看