jQuery学习笔记(一)

最新推荐文章于 2024-01-20 21:49:50 发布

Ai2015WER

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量2.5k

点赞数 2

分类专栏： jQuery Web前端文章标签： jquery div stylesheet function border action

本文链接：https://blog.csdn.net/hurryjiang/article/details/6769231

版权

Web前端同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

jQuery

43 篇文章 0 订阅

订阅专栏

今天是我学习 jQuery的第一天,主要学习的内容如下：

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.向指定标签中插入文本

$('div#hideOrShowDiv').html("contentValue");

-------------------------------代码粘贴于此，供大家参考，写得不好，主要自己学习之用------------------------------

 <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文件.

第一次真正开始学习jQuery，感觉很不错，推荐你也学学>>

jQueryAPI:

http://api.jQuery.com

Ai2015WER

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jQuery学习笔记(一)

今天是我学习 jQuery的第一天,主要学习的内容如下：1. 网页加载完成后的事件编写;2. jQuery选择器的使用方法;3. jQuery获取/修改标签内容和获取/标签属性值;4. jQuery隐藏/显示标签5.jQuery给标签添加Click事件的方法
复制链接

扫一扫