`

jquery选择器学习笔记

阅读更多

想找份用jsp做网站的web2.0的公司,谁能帮我啊,QQ:64738479,可以联系我。 

 

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{border:2px solid $red;}
.firstp{color:red;}
.hignlight{background:gray;}
.dd{width:20px;height:20px;border:2px solid}
</style>
note: jequery api 函数区分大小写
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("div.d1").fadeOut("slow");
$("p").filter(".ppp");

$("img.img1").attr(//为之指定元素(组)添加指定属性(名值对方式)
{src:"http://docs.jquery.com/images/hat.gif",title:"http://docs.jquery.com/images/hat.gif",
alt:"jquery logo"}
)
var alt = $("img").attr("alt");//获取指定元素(组)第一个元素的alt属性值
//   alert(alt);
$("img").attr('src','http://www.sinaimg.cn/home/07index/sinahome_ws_009.gif');//为之指定元素(组)添加指定属性(名值对方式)
$("img").attr("title",function(){//指定元素的属性值用一个函数返回的结果代替
   return this.src;
})
$("img").removeAttr("title");//移除指定元素属性值

$("p:last").addClass("lastp");//addclss 为指定元素添加class p:last 为最后一个p元素
$("p:first").addClass('firstp');
$("p:last").removeClass();//移除指定元素class
$("p").toggleClass("highlight");//为指定元素
$("p").toggle(function(){//toggle() 为指定元素按click轮换执行两个函数
   $(this).addClass("hignlight");
},function(){
   $(this).removeClass('hignlight')
})

$("p").click(function(){//html()为指定元素追加内容
   var html = $("p").text();
   $("p").html(html);
})

// $("div").eq(1).addClass("hignlight");//div 按索引添加类

// $("div").text($("img").attr("title"));//为指定元素标签设置内容text()用法
var text = $("div").text();//获取所有div标签元素内容
var text = $("div.d1").text();//获取指定class为d1的div标签元素内容
//
// $("p > a").hide();//隐藏p元素内的链接
$("p[a]").hide();//隐藏p元素内的链接
$("p:eq(0]").hide();
// $("div:visible").hide();//隐藏所有可见div
// alert(text);

$("p:lt(5)").css('border','2px solid')//:lt(n) 索引小于n的元素
$("p:gt(2)").css('border','7px solid green')//:gt(n) 索引大于n的元素

$("p:parent").css('background','red');
$("div:contains('tt')").hide();//隐藏所有text包行tt的div元素
$("div:contains('ccc')").css('border','3px dotted');//添加calss为所有text包行ccc的div元素

$("input:text").css('border','2px solid');//input元素下text类添加class
$("input:text",'myform').css('border','3px solid');

$("input[@type]")//属性含type的所有input元素
$("input[@type=text]").val("change input type text1");//属性为type属性值为text的所有input元素
$("input[@type=radio]").val("change input type text1");//属性为type属性值为radio的所有input元素
$("img[@src*=sina]").css('border','4px solid');//获取src属性中包含 gif 字符的img元素的所有元素
$("img[@src^=http]").css('color','red');//获取src属性中包口 http 字符开始img元素的所有元素
$("img[@src$=gif]").css('background','green');//获取src属性中 gif 结束字符的img元素的所有元素

})
</script>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<div class="d1" style="height:200px;display:block;background:#cccccc"><span>aa</span>nn</div>
<p class="ppp">dsafasdaf</p>
<p>aaaaaaaa</p>
<Img class="img1" src="#"></img><Img src="#"></img><Img src="#"></img>
<div class="dd">aaa</div>
<div>bbbtt</div>
<div>ccc</div>
<p> <a href="#">aa</a></p>
<p> <a href="#">aa</a></p>
<p> <a href="#">aa</a></p>
<form name="myform">
input type text1:<input type="text" name="t1" value="this is input type is text1"><br />
input type text2:<input type="text" name="t2" value="this is input type is text2"><br />
input type radio1:<input type="radio" name="r1" value="this is input type is radio1">
</form>
<div>tt</div>
<div>aabb</div>
<div>tcccabcv</div>
</body>
</html>

分享到:
评论
1 楼 naodai 2008-04-24  
$("img[@src*=sina]").css('border','4px solid');//获取src属性中包含 gif 字符的img元素的所有元素

这个的注释不对吧!
是获取src属性中包含sina字符创的图片吧!

相关推荐

    jQuery选择器学习笔记

    该学习笔记带有很不错的DEMO,而且笔记中有比较详细的总结,对于初学者来说,可以根据笔记中的实例训练,达到理解jQuery核心——选择器的目的。

    《jQuery权威指南》学习笔记之第2章 jQuery选择器

    《jQuery权威指南》学习笔记之第2章 jQuery选择器

    jquery 学习笔记总结

    jquery的学习总结笔记 对选择器和常用方法进行总结 有实例

    Jquery 选择器整理

    Jquery选择器分类整理,基本都包含到了,学习笔记。

    jquery 学习笔记源码 3jquery常规选择器

    jquery 学习笔记源码 3jquery常规选择器

    jQuery验证框架学习笔记.pdf

    jQuery验证框架学习笔记,学习jQuery很有帮助。 jQuery验证框架(一) 可选项 jQuery验证框架(二)插件方法 jQuery验证框架(三、四)选择器及实用工具

    Jquery学习笔记分享

    第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...

    Ajax和jQuery学习笔记

    这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!

    jQuery笔记

    学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势  可以简化JavaScript代码  可以像css那样获取元素  可以修改css来控制页面效果  ...

    jquery学习笔记

    详细而完整的jQuery学习笔记,包含jQuery选择器等

    JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)

    目录 一.JQuery了解 1,原生js的问题  2. JQuery简单介绍 2.1 官方自我介绍: ...三.$()选择器 1.$()选择的结果是一个类数组 2.使用方法(引号问题) 3.文档加载  3.1 [removed]()函数和$(document).re

    js学习笔记——(15)jQuery选择器、样式操作、效果

    1.jQuery选择器 1.1jQuery基础选择器 原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可,但是要加引号 原创...

    jquery 笔记

    jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ,动画,ajax 。方便了网页技术的快速发展

    jQuery学习总结笔记

    帮你了解什么是jQuery,jQuery的特点。...jQuery选择器,DOM对象和jQuery对象的互相转换以及为啥要转换。获取当前元素的其他方法,创建元素的方法。修改元素属性与自定义属性的方法。以及多库共存如何使用。

    JQuery学习笔记

    JQuery学习中的笔记。包括内置函数、Dom对象和JQuery对象、选择器和过滤器、隐式迭代等

    jQuery学习笔记

    jQuery基本语法 jQuery与DOM对象的转换 jQuery选择器 元素选择器 属性选择器 筛选 操作标签属性 操作css 内容操作 jQuery事件

    jQuery学习笔记之jQuery选择器的使用

    jQuery中最核心和最让人爱不释手的就是选择器,下面就是各种选择器代笔的意义。

    JQuery 学习笔记 选择器之一

    本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种...

    jQuery学习笔记 获取jQuery对象

    使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector)。但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector)[removed]以获取元素内部HTML代码是错误的,正确写法是$...

Global site tag (gtag.js) - Google Analytics