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

     

  • 相关阅读:
    牛人的博客,备忘
    dev gridlookupedit
    Oracle with as 用法
    动态加载DLL对接第三方接口
    Oracle执行计划不稳定
    JAVA Cannot find class [×××] for bean with name '××' defined in class path resource [×××] 问题解决方法
    JAVA B/S通过摄像头采集图片信息解决方案。
    使控件悬浮在页面上不随滚动条变化的JQUERY插件
    原生态水平和垂直拉伸的JQUERY插件
    javascript实现继承的类
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4590848.html
Copyright © 2020-2023  润新知