Jquery 第一章

最新推荐文章于 2025-05-24 15:24:14 发布

chuosaomeng9354

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量159

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xiaojunx/blog/835721

版权

1.如果我们获取的是jQuery对象，那么我们在变量前面加上$符号。

例
var $variable=jquery 对象

2.如果获取的是DOM对象，那么？

var variable=DOM 对象

3.jQuery库类型说明

jQuery.js 开发版（未经压缩）

jQuery.min.js 生产版（最小化和压缩版）

4.编写简单的jQuery代码

在jQuery库中，$就是jQuery的一个简写形式。$("#info") 和 jquery("#info") 是一样的。

5.当鼠标点击到a元素（它是class含有leave1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class,并且将紧邻它们后面的元素都隐藏。

<body>
  <div class="box">
    <ul class="menu">
      <li class="leav1">
        <a href="#none">衬衫</a>
        <ul class="leav2">
          <li><a href="#none">白衬衫</a></li>
          <li><a href="#none">红衬衫</a></li>
          <li><a href="#none">蓝衬衫</a></li>
          <li><a href="#none">黑衬衫</a></li>
        </ul>
      </li>
      <li class="leav1">
        <a href="#none">裙子</a>
        <ul class="leav2">
          <li><a href="#none">短裙</a></li>
          <li><a href="#none">长裙</a></li>
          <li><a href="#none">超短裙</a></li>
        </ul>
      </li>
      
    </ul>
  </div>
  

 <script type="text/javascript">
    $(".leav1>a").click(function(){    //当鼠标点击到a元素(它是class含有leav1的子元素)的时候
      $(this).addClass("current")      //给当前元素添加"current"样式
      .next().show()                   //下一个元素显示
      .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素<a>移除"current"样式
      .next().hide();                //下一个元素隐藏
      return false;
    })
  </script>
</body>

addClass 和 addclass 的效果不一样

6.jQuery对象和DOM对象

DOM对象：通过JavaScript用getElementsByTagName 或 getElementById 获取的元素节点，就是DOM元素。DOM对象可使用JavaScript中的方法。示例如下：

var domobj=getElementById("id")     //获得DOM对象
var objHTML=domobj.innerHTML        //使用JavaScript中的属性——————innerHTML

jQuery对象：通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里面的方法。例如：

$("#foo").html()       //获取ID为foo的元素内的HTML代码        // .html()  是jQuery里面的方法

7.jQuery对象和DOM对象相互转换

jQuery对象转换DOM对象

var $cc = $("#cc");
var cc = $cc[0];
第二种方法：

var $cc=$("#cc")
var cc=$cc.get(0)

DOM对象转换jQuery对象

var cc=getElementById("id")
var $cc=$(cc)

8.作业判断复选框是否被选中

<body>
  <input type="checkbox" name="" id="cc">
  <label for="">我已同意</label>
用DOM方法判断：
  <script type="text/javascript">
    $(document).ready(function(){        //等待DOM元素加载完毕
      var $cc=$("#cc");                  //把jQuery对象转换为DOM对象
      var cc=$cc[0];
      $cc.click(function(){
        if(cc.checked){                 //DOM方式判断
          alert("xiexie")
        }
      })
    })

  </script>
</body>

用jQuery方法判断：
<script type="text/javascript">
    $(document).ready(function(){      //等待DOM元素加载完毕
      var $cc=$("#cc");                  //把DOM对象转换为jQuery对象
      $cc.click(function(){
        if($cc.is(":checked")){         //DOM方式判断
          alert("谢谢")
        }
      })
    })

  </script>

is(“：checked”）是jQuery中的方法，判断jQuery对象是否被选中，返回Boolean值。

9.jquer库在其它库之后导入

  <!-- 先导入其它库 -->
  <script type="text/javascript" src="../lib/prototype.js"></script>
  <!-- 后导入jQuery库 -->
  <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
 <p id="pp">test-prototype将被隐藏</p>
 <p>test-jquery将被绑定单击事件</p>
  <script type="text/javascript" language="javascript">
    jQuery.noConflict(); //将变量$的控制权移交给prototype.js  // 使用另一个库的 $ 的代码
    jQuery(function(){   //使用jQuery
      jQuery("p").click(function(){
        alert(jQuery(this).text())
      })
    })
$("pp").style.display='none';  //使用prototype.js隐藏元素
  </script>
</body>

10.在其他库之前导入

 <!-- 先导入jQuery库 -->
  <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
  <!-- 后导入其它库 -->
  <script type="text/javascript" src="../lib/prototype.js"></script>

</head>
<body>
 <p id="pp">test-prototype将被隐藏</p>
 <p>test-jquery将被绑定单击事件</p>
  <script type="text/javascript" language="javascript">
    jQuery(function(){   //直接使用jQuery，无需调用"jQuery.onConflict()"函数
      jQuery("p").click(function(){
        alert(jQuery(this).text())
      })
    })
$("pp").style.display='none';  //使用prototype.js隐藏元素
  </script>
</body>
</html>

转载于:https://my.oschina.net/xiaojunx/blog/835721