zoukankan      html  css  js  c++  java
  • 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】

    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).hide(1000); 一秒内缓慢隐藏
      $(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>

    5.jquery选择器

    1)元素选择器
    $("p") 选取所有 <p> 标签。
    $("p.intro") 选取所有 class="intro" 的 <p> 元素。
    $("p#demo") 选取所有 id="demo" 的 <p> 元素。
    $("ul li:first")  每个 <ul> 的第一个 <li> 元素 
     
    2)属性选择器
    $("[href]") 选取所有带有 href 属性的元素。
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    3)CSS 选择器
    $("div#intro .head")  id="intro" 的 <div> 元素中的所有 class="head" 的元素
    $("p").css("background-color","red");  选取所有<p>标签,并改变其css的background-color属性

  • 相关阅读:
    隐马尔可夫模型
    Win10家庭版安装Linux子系统
    python 里的常见包及学习链接
    perl 从命令行读取文件并打开
    Linux 压缩解压缩
    python 2.7.9 安装beautifulsoup4
    成绩排名
    urlretrieve下载图片--爬虫
    python实现人工智能之路--语音识别加语音合成
    django中间件解决跨域问题-No 'Access-Control-Allow-Origin'
  • 原文地址:https://www.cnblogs.com/wskxy/p/6679825.html
Copyright © 2011-2022 走看看