zoukankan      html  css  js  c++  java
  • jquery第二期:三个例子带你走进jquery

    jquery是完全支持css的,我们举个例子来看看使用jquery的方便之处,这功劳是属于选择器的:

     例1:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {
          $("li.abc").css("color","red");
    	   });
    </script>
    </head>
    <body>
    <div id="hello">
      <ul>
        <li>niujiabin</li>
        <li class="abc">maybe</li>
        <li>gossipgo</li>
      </ul>	
    </div>
    
    </body>
    </html>

    我们想要做到改变maybe字体颜色为红色

     $("li.abc")

    利用选择器可以直接获取到,非常方便,如果利用javascript获取就很麻烦


    .css("color","red");

    <li>之间的文本就会变成红色


    运行结果:

    例2:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {
          $("#hello ul li:even").css("background","grey").css("color","red");
    	   });
    </script>
    </head>
    <body>
    <div id="hello">
      <ul>
        <li>niujiabin</li>
    	<li class="abc">maybe</li>
    	<li>gossipgo</li>
      </ul>	
    </div>
    
    </body>
    </html>
    $("#hello ul li:even")

    选取id为hello下的ul下的li的奇数行。

    .css("color","red");

    改变奇数行的颜色


    运行结果:



    例3:


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    .bg{
    background:#f00;
    color:#fff;
    }
    </style>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {
         $("li").mouseover(setColor).mouseout(setColor);
    
    	 function setColor()
    	 {
    		 $(this).toggleClass("bg");
    	 }
    	   });
    </script>
    </head>
    <body>
    <div id="hello">
      <ul>
        <li>niujiabin</li>
    	<li class="abc">maybe</li>
    	<li>gossipgo</li>
      </ul>	
    </div>
    
    </body>
    </html>
    <style type="text/css">
    .bg{
    background:#f00;
    color:#fff;
    }
    </style>

    css样式,设置背景色和颜色


    $("li").mouseover(setColor).mouseout(setColor);
    为li添加事件


    运行结果是鼠标放到哪就会显示变化,离开就会消失。


  • 相关阅读:
    FXML Stuffs (include and define)
    javaFX中解决填充(拉伸)问题
    <转>用 Java 技术创建 RESTful Web 服务
    webservice restful一个小例子
    《转》理解restful
    webservice之restlet实现
    WebService:CXF-SPRING 读书笔记
    PHP 单链表
    php 读xml的两种方式
    php输出金字塔
  • 原文地址:https://www.cnblogs.com/pangblog/p/3331394.html
Copyright © 2011-2022 走看看