zoukankan      html  css  js  c++  java
  • jquery学习之笔记一

    jquery是继prototype后一个很好用的javascript库。jquery是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能.

    window.onload  与$(document).ready()的区别
    1.执行时机:window.onload 必须等待网页中所有的内容加载完毕之后才能执行(包括图片)
                       而$(document).ready()当网页中所有DOM结构绘制完毕之后就执行,可能DOM关联的东西并没有加载完。
    2.编写个数:window.onload只能编写一次,而后者可以编写好多次
    3.简化写法:前者没有,后者可以简写成为$(function(){.......});

    一个导航栏的小例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    </head>

    <style type="text/css">
      .menu{ 300px;}
      .has_children{ background:#555; color:#fff; cursor:pointer}
      .highlight{ color:#fff; background:green;}
      div{ padding:0; margin:10px 0;}
      div a{ background:#888; display:none; float:left; 300px;}
    </style>

    <script type="text/javascript">
    $(function(){
        $('.has_children').click(function(){
            $(this).addClass('highlight').children('a').show().end().siblings().removeClass('highlight').children('a').hide();
        });
     
    });   
    </script>
    <body>
    <div class="menu">
       <div class="has_children">
          <span>第一章 认识jquery</span>
          <a>1.1javascript 和javascript库</a>
          <a>1.2javascript 和javascript库</a>
          <a>1.3javascript 和javascript库</a>
          <a>1.4javascript 和javascript库</a>
          <a>1.5javascript 和javascript库</a>
          <a>1.6javascript 和javascript库</a>
          <a>1.7javascript 和javascript库</a>
       </div>
       
       <div class="has_children">
          <span>第二章 jquery选择器</span>
          <a>2.1javascript 和javascript库</a>
          <a>2.2javascript 和javascript库</a>
          <a>2.3javascript 和javascript库</a>
          <a>2.4javascript 和javascript库</a>
          <a>2.5javascript 和javascript库</a>
          <a>2.6javascript 和javascript库</a>
          <a>2.7javascript 和javascript库</a>
       </div>
       
       <div class="has_children">
          <span>第三章 jquery操作DOM</span>
          <a>3.1javascript 和javascript库</a>
          <a>3.2javascript 和javascript库</a>
          <a>3.3javascript 和javascript库</a>
          <a>3.4javascript 和javascript库</a>
          <a>3.5javascript 和javascript库</a>
          <a>3.6javascript 和javascript库</a>
       </div>
    </div>
    </body>
    </html>

    如何将一个jquery对象转换成DOM对象

    (1)jquery对象是一个数组对象,可以通过[index]对象转换

    var $cr=$('#cr');   var cr=$cr[0];   alert(cr.checked);

    (2)利用jquery本身的get(index)方法

    var $cr=$('#cr');      var cr=$cr.get(0);   alert(cr.checked);

     

  • 相关阅读:
    ab命令做压测测试
    用js两张图片合并成一张图片
    Web全景图的原理及实现
    深入理解Java中的IO
    Spring AOP详解
    spring @Transactional注解参数详解
    优化MyBatis配置文件中的配置
    使用MyBatis对表执行CRUD操作
    @requestBody注解的使用
    url 拼接的一个模块furl
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4590848.html
Copyright © 2011-2022 走看看