jQuery——入门

最新推荐文章于 2024-09-24 09:20:58 发布

Pureso

最新推荐文章于 2024-09-24 09:20:58 发布

阅读量60

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zhongshun0928/article/details/115449969

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    // window.οnlοad=function (){
    //    var btnObj=document.getElementById("btnId");
    //    btnObj.οnclick=function () {
    //      alert("js的原生单击事件");
    //    }
    // }

    //$ 是一个函数

    $(function () {//表示页面加载完成之后，相当于window.οnlοad=function (){}
      var $btnObj=$("#btnId");//表示按id查询标签对象
      $btnObj.click(function () {
        alert("jQuery的单击事件");
      });
    });

  </script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

jQuery的核心函数

 传入参数为[函数]时，在文档加载完后执行这个函数
 传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
 传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象
     $("#id属性值");    id选择器，根据id查询标签对象
     $("标签名");       标签名选择器，根据指定的标签名查询标签对象
     $(".class属性值"); 类型选择器，可以根据class属性查询标签对象 
 传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript ">

    $(function () {
      alert("页面加载完，自动调用");

      $("<div>\n" +
        "  <span>div-span1</span>\n" +
        "  <span>div-span2</span>\n" +
        "</div>").appendTo("body");

      // alert($("button").length);

      var btnObj=document.getElementById("btn01");//DOM对象
      alert($(btnObj));

    });
    //传入参数为[函数]时，在文档加载完后执行这个函数
    //传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
    /*传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象
        $("#id属性值");    id选择器，根据id查询标签对象
        $("标签名");       标签名选择器，根据指定的标签名查询标签对象
        $(".class属性值"); 类型选择器，可以根据class属性查询标签对象
     */
    //传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回

  </script>
</head>
<body>
<div>
<button id="btn01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
</body>
</html>

DOM对象和jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function (){

      // var arr=[12,'avc',true];
      //
      // var $btns=$("button");
      //
      // //jQuery对象是 don对象的数组+jQuery提供的一系列功能函数
      //
      // for(var i=0;i<$btns.length;i++){
      //   alert($btns[i]);
      // }
      // document.getElementById("testDiv").innerHTML="这是dom对象的属性innerHTML";

      // $("#testDiv").click(function () {
      //   alert("click()是jQuery的方法");
      // });



      }
    );

    /*
    dom对象转化为jQuery对象
        1、现有DOM对象
        2、$(DOM对象) 就可以转化为jQuery对象

    jQuery对象转化为Dom对象
        1、现有jQuery对象
        2、jQuery对象下标取出相应的DOM对象
     */

  </script>
</head>
<body>
<div id="testDiv">Good</div>
<button id="dom2dom">使用dom对象调用dom方法</button>
<button id="dom2jQuery">使用dom对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jquery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用dom方法</button>
</body>
</html>