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);

     

  • 相关阅读:
    CPP--关于long的争议和思考
    CPP--借助神器VS理解内存存储(含大小端对齐)
    1.QT开发第一个程序
    POJ-1456 Supermarket 贪心问题 有时间限制的最小化惩罚问题
    HDU-4310 Hero 贪心问题
    HDU-1789 Doing Homework again 贪心问题 有时间限制的最小化惩罚问题
    HDU-2303 The Embarrassed Cryptographer 高精度算法(大数取模)
    【错题本】刷算法题中出现的一些错误和小技巧
    HDU-2050 折线分割平面 找规律&递推
    记intel杯比赛中各种bug与debug【其五】:朴素贝叶斯分类器的实现和针对性的优化
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4590848.html
Copyright © 2011-2022 走看看