码迷,mamicode.com
首页 > Web开发 > 详细

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

时间:2017-04-07 21:57:47      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:弹出框   引用   set   utf-8   操作   .com   text   value   文件   

1.如何使用jQuery

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    使用jQuery前必须下载并引用jQuery的js文件,下载链接为http://jquery.com/

    技术分享

    技术分享

    下载完成后引入jQuery文件

    技术分享

          <script src="js/jQuery.js"></script>

为防止jquery程序中中文乱码,应在引入

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <!--防止乱码-->

</head>

2.jQuery弹出框

<script>

$(document).ready(function(){
  alert("显示提示框,我的第一个jQuery程序");
 });
</script>

 技术分享

 3.jQuery对div进行操作

<script>
$(document).ready(function(){    //document表示加载body时触发的事件
 $("p").click(function(){     //表示标签<p>的click事件
  $(this).hide();          //隐藏这个标签
  $(this).html("sda5");    //更改div内容
  $(this).css("background-color","blue")    //更改div的css   背景颜色
  $(this).css("color","beige")    //更改div的css   字体颜色
 });
 });
</script>
</head>
<body>
 <p>sda1</p>
 <p>sda2</p>
 <p>sda3</p>
 <p>sda4</p>
</body>

4.jQuery对class,id,type的操作

<head>

<script>
$(document).ready(function()
{
  $(":button").click(function()  //指定到type="button",定义click事件
  {
      $(".test").hide();        //指定到class="test",定义隐藏
  });
  $(".button").click(function()  //指定到type="button",定义click事件
  {
      $("#test").hide();        //指定到class="test",定义隐藏
  });
});
</script>
</head>
<body>
 <p class="test">这个标签引用了类 test,触发事件会消失</p>
 <a class="test">这个标签也引用了类 test,触发事件会消失</a>
 <a id="test">这个标签也引用了id:test,触发事件会消失</a>
 <p id="test">这个标签不引用</p>
 <input type="button" value="clickme"/>  <!--点击触发事件-->
</body>

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

标签:弹出框   引用   set   utf-8   操作   .com   text   value   文件   

原文地址:http://www.cnblogs.com/wskxy/p/6679825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!