jQuery学习笔记(一)
来源:互联网 发布:飞鱼网络电视手机版 编辑:程序博客网 时间:2024/04/28 09:39
1. 网页加载完成后的事件编写;
2. jQuery选择器的使用方法;
3. jQuery获取/修改标签内容和获取/标签属性值;
4. jQuery隐藏/显示标签
5.jQuery给标签添加Click事件的方法
学习心得:
1. 怎样实现自动感知 隐藏/显示 标签块
思路=>对隐藏/显示按钮 设置一个自定义属性,如下面代码中<input type="button" name="action" id="action" value="Hide DIV#hideOrShowDiv" operation="hide"></input>的operation属性就是自定义的,他有两个值('hide'/'show'),默认值为'hide',这样每点击一次,就用jQuery变换一次值(在hide与show这两个值之间) ,隐藏或显示某一个标签块时只需要判断该operation属性的值就知道了。
另外介绍一下jQuery非常简便的方法即可实现:
$('input#toggleaction').click(function(){
$('div#hideOrShowDiv').toggle();
});
简直太容易了...
2. 获取 / 设置某一个标签属性的值
$("标签").attr("属性名");//获取属性值
==》
$('div').attr('id');
$('div#idname').attr('id');
$('div.classname').attr('id');
$("标签").attr('属性名','属性值');//设置属性值
==》
$('div').attr('id','xxvalue');
$('div#idname').attr('id','xxvalue');
$('div.classname').attr('id','xxvalue');
3. hide() & show()用法
隐藏标签:$('标签名').hide();
显示标签:$("标签名").show();
4.获取标签文本值
$('div#hideOrShowDiv').text()
5.向指定标签中插入文本
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQuery Practice 1: The Write Less, Do More, JavaScript Library</title> <!--<link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/reset.css" type="text/css" />--> <!--<link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/screen.css" type="text/css" />--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> // we will add our javascript code here //1.To do this, we register a ready event for the document. //1.文档加载完成后触发该事件 $(document).ready(function(){ // do stuff when DOM is ready //change the div# css $("div#hideOrShowDiv").css("border","3px solid green"); //add click-event to tag: div&a $("div").click(function(){ //给所有标签添加指定的CSS样式 $("*").css("border","3px solid yellow"); //给第一个div标签设置CSS样式 $("div:eq(0)").css("border","3px solid purple"); alert("Click DIV,DIV say hello to jQuery!"); }); $("a").click(function(){ //给所有<a>标签添加指定的CSS样式 $("a").css("border","3px solid red"); alert("Click A tag,A say hello to jQuery!"); }); $("input#action").click(function(){ //获取指定标签的属性值,get specified tag's attribute's value. if($("input#action").attr('operation')=='hide') { //hide div & changed div's content $('div#hideOrShowDiv').hide(); $('div#hideOrShowDiv').html('I am a div,show me'); // $("input#action").attr("value","<font color='blue'>Show DIV#hideOrShowDiv</font>"); //changed tag's attribute-value $("input#action").attr('operation','show'); alert("'div#hideOrShowDiv' have changed=>"+$('div#hideOrShowDiv').text()+ ";'input#action' have changed=>"+$('input#action').attr('value')+"."); } else if($("input#action").attr('operation')=='show') { //show div & changed div's content $('div#hideOrShowDiv').show(); $('div#hideOrShowDiv').html('I am a div,hide me'); // $("input#action").attr('value',"<font color='black'>hide DIV#hideOrShowDiv</font>"); $("input#action").attr('operation','hide'); alert("'div#hideOrShowDiv' have changed=>"+$('div#hideOrShowDiv').text()+ ";'input#action' have changed=>"+$('input#action').attr("value")+"."); } else if($("input#action").attr('operation')=='undefined') { alert('input#action"s (self-defined)property-operation is undefined.'); } else {alert('error!');} }); }); </script> </head> <body> <!-- we will add our HTML content here --> <div id="demo" style="font-size:20px;background-color:green;"> <cute>Hello jQuery!</cute><br/><b>Click this DIV>><br/><address>注册文档加载完成事件:<br/> $(document).ready(function(){...});</address></b> </div> <p><br/><m>I'm a un-defined tag,not any change on me!!!</m></p><br/> <a href="#" >say hello=></a><br/> <a href="#" ><font size="+3">test tag,click me,I will update my css!!!=></font></a><br/> <b>==========================================================================================</b><br/> <br/> <div id="hideOrShowDiv"> I 'm a div,Hide Me! </div> <br/> <p> <!--'operation' is a self-defined property:used for hideOrshow div--> <input type="button" name="action" id="action" value="Hide DIV#hideOrShowDiv" operation="hide"></input> </p> </body> </html>
可以直接复制该代码,运行即可看见效果。
无需下载jQuery.js文件,我是用google提供的在线jQuery.js文件.
转自http://blog.csdn.net/jpr1990/article/details/6769231- JQuery学习笔记(一)
- Jquery学习笔记(一)
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- jquery学习笔记(一)
- JQuery 学习笔记(一)
- jQuery学习笔记(一)
- JQuery学习笔记(一)
- jQuery学习笔记(一)---
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- JQuery学习笔记(一)
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- JQUERY 学习笔记(一)
- JQuery 学习笔记(一)
- jQuery 学习笔记(一)
- JQuery学习笔记(一)
- 【黑马.net程序员】C#简单的操作Xml文件
- 利用ASP.NET设计FTP文件上传
- HDFS集群的启动(5)——NameNode任务线程之FSNamesystem$HeartbeatMonitor
- 写技术博客的注意事项
- CPU卡使用的简单情况举例
- jQuery学习笔记(一)
- 【六】 进程间通信——(PIPE)无名管道
- Android 开发人员必须掌握的 10 个开发工具
- 在ubuntu上安装google输入法
- Ubuntu 11.10 安装日志
- 关于解Bug的总结
- linux下usb摄像头采集的YUYV格式转换成JPEG格式的图片
- C#中接口通过基类或派生类对方法的调用
- 自定义标签3