`

Jquery初步学习

    博客分类:
  • js
阅读更多

Jquery初步学习要点:
1.如何获取对象?
$("#idname|.classname|proname|*")
注意:该方法返回的是一个query对象集合,如果加上索引([0])则返回的是一个dom对象,使用each(function)则循环获取DOM对

象,function里面可以使用this对当前dom对象的引用。
ex:
$("#testDiv").each(function() { alert(this) })
$("#testDiv").each(function() { $(this).html("修改内容") })
(this本身是个dom对象 如果在$(this)则为一个query对象)

2.取到对象后,如何给对象属性赋值?
第一种方法:使用jquery对象的索引[0](返回dom对象)和其each(functionName)方法获得dom对象,然后就和传统的javascript一样

设置和读取其属性值。
第二种方法:使用jquery对象的attr("property")获取其属性值,针对class,property可以是"class",也可以是"className",但

为了养成习惯,以后我还是用className吧

3.如何设置属性的值?
这里也是主要用到attr(***)的“重载”方法!
A.attr(properties):使用{名:"值"[,名:"值"]}的方式对对象进行赋值,需要注意的:cssName:"classTemp"
ex:$("img").attr({ src: "test.jpg", alt: "Test Image" });
B.attr(key,value):使用键值对的方式进行赋值,此中方法一次只能对一个属性进行赋值。
ex:$("img").attr("src","test.jpg");
c.attr(key,functionName):设置key的值,但该值是一个函数返回的。
ex:$("img").attr("title", function() { return this.src });

4.关于删除属性
removeAttr(name):删除name属性。
ex:$("img").removeAttr("src");

 

附加一个小实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--

-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function ui(){
	this.aa="111";
	return this;
};
ui.prototype.testFun=function(){
	var that=this;
	alert(that.aa);
	
}
function test(){
	alert("你点了我哦");
}
$(function (){
	$(".Layer1").each(function (i){
		//alert( this.innerHTML)	
		var _html=$(this).html();
	})
	var layLen=$(".Layer1").size();	
	$("#test").removeAttr("value");
	$("#test").attr("value","测试数据");
	$("#test").attr("onclick","test()");
	
	$("#btn").attr({value:"点击啊",onclick:"test()"})
	var _val=$("#btn").val();
	_val=$("#btn").attr("value");
	var _ui=new ui();
	_ui.testFun();
	
})

</script>
</head>

<body>
<div class="Layer1">1</div>
<div class="Layer1">2</div>
<div class="Layer1">3</div>
<div class="Layer1">4</div>
<input type="text" id="test" name="test" value="xxxx"/>
<input type="button" id="btn" name="btn" value="xxxxbtn"/>
</body>
</html>

 

 

 

 

分享到:
评论

相关推荐

    JQuery PPT

    JQueryPPT JQuery基础 JQuery 初步学习

    jquery初步入门学习小资料

    jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。基本了解html、js、css的的基本概念,就可以直接学习jquery了。

    jquery、ajax学习电子书.zip

    ajax、jquery这个是实际开发中使用最多的脚本,js在兼容性上有待提高,学会这些电子书,那么已经可以算是初步入门,可以进行实际开发了。

    初步学习jQuery的概念及选择器

    浅讲一下我对jQuery的认识及理解,稍后我会继续努力的!

    jquery学习总结

    详细的jquery学习总结,从初步的学习到高级应用全面总结汇总

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    鉴于这种复杂的体系架构,以及对浏览器缺陷的完善也非短期可以完成,开始为这款机顶盒浏览器移植jQuery,从而开始了对jQuery源码的学习和分析。 从2011年6月开始,开始把心得和记录整理成《jQuery 1.6.1源码分析系列...

    学习JQuery绝对原创

    本文档完全免费,完全鄙视那些从别个网站抄点就要分的,你丫是多么可耻!本文档由自己原创,有牛叉的前辈多指教! 主要初步讲解JQuery,是真心站在初学者的状态讲解! 联系方式文档里面哟,大家多交流!

    jQuery做的小例子

    包含jQuery的初步学习,源代码文件,有助于初学者的学习

    jQuery常用技术

    适合jquery的初步学习和开发时可以查看

    15天学会JQuery

    这是一个学习JQuery的速成教材,3天必会,完全适合新手了解及初步掌握JQuery,也适合老手复习总结

    jQuery Validate初步体验(二)

    在上篇文章给大家介绍了jQuery Validate初步体验(一) ,本文继续给大家分享jquery validate相关知识,对本文感兴趣的朋友快来学习吧。 刚刚试了所谓的新版的用法。千万别问我是多新,因为我也不知道。。。 &lt;!...

    JQueryDemo

    jquery 一个简单的应用实例,对于初学者学习jquery语法,有个初步的认识,和了解。

    jQuery Validate初步体验(一)

    jQuery 是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理... jQuery 是为改变你编写JavaScript 的方式而设计的,本文给大家分享jquery validate初步体验(一),感兴趣的朋友一起学习吧

    jquery基础知识第一讲之认识jquery

    jquery基础知识第一讲之初次见面,对jquery有一个初步认识,为之后的学习打下基础,感兴趣的小伙伴们可以参考一下

    将jQuery应用于login页面的问题及解决

    最近在学习和试用jquery,感觉它的ajax和ashx发回json简直是完美的结合,如果我们可以在Form验证时使用这种方式,则login页面几乎就可以达到简洁的极致了。在login页面中使用jquery的ajax回叫ashx验证用户名和密码,...

    精通JQuery 比较适合初学者

    jQ学习 初步到精通 有三季 比较适合初学者

    使用jquery局部刷新(jquery.load)从数据库取出数据

    因为Jquery 是一个很好的javascript框架,我对他的运用还只是表面的,处于一个初步学习的阶段,所以通过博客记录我学习的点滴,大神可以略过,写此文章希望可以帮到和我一样的初学者,共同分享,共同进步。...

    day_45_bookstore.rar

    本Java视频教程案例是尚硅谷JavaWEB学习完成后的一个总结性案例,由讲师在第45、46、47天带领学员一起完成。...学习本案例后,将初步具备 JavaEE 企业级开发技能,并为学习后面的框架和项目扫除障碍。

    jquery中用jsonp实现搜索框功能

    用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频。自己之前的代码找不到了,之前最先的想法也是来自那里,所以这次直接用那里的代码) html代码: &lt;div...

Global site tag (gtag.js) - Google Analytics