Jquery的使用

Jquery的准备工作

第一：

将Jquery引入到项目中

 第二：

html用引入Jquery文件

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>

一、万能的$

$是一个对象，也是一个方法

1.1直接获取页面的元素

　　　　$("选择器") 例:$("#id值")

<script>
    $(function() {
        $("#btn");//获取id为btn的标签
        $(".btn");//获取所有class为btn的标签
        $("p");//获取所有p标签
        $("input[name=hobbies]");//获取所有name属性为hobbies的input标签
        $("tr:even");//获取所有下标为偶数的tr标签

    });
</script>

1.2 dom就绪后执行相应的代码

window.onload = function(){...} -> 页面加载完毕后执行(所有数据请取完毕)

window.onload = function(){
    //1.可以获取当前页面中的元素
    var mydiv = $("#mydiv");
    console.debug(mydiv);
}

$(function(){...}) -> dom加载就绪(只需要读取到标签与属性即可（速度更快，性能更好）)

$(function(){
      //1.可以获取当前页的元素
      //  jQuery的方案获取的元素
      var mydiv = $("#mydiv");
      console.debug(mydiv);
})

1.3 原生的dom对象和jQuery对象互转

jQuery对象的功能更加强大 （object{...}），是一个伪数组(它不是数组，但是可以当作数组用，数组中装的就是原生对象)

1、把原生对象转成jQuery对象

$(function(){
 　　console.debug($(mydivDom));
}

2、把jQuery对象转成原生对象

 

$(function(){
  　　 console.debug(mydiv[0]);
       console.debug(mydiv.get(0)); 

})

1.4 直接创建dom元素 原本：document.createElement("div");

var div = $("<div><span>sdfasdfsdf</span></div>");

1.5 直接调用相应的方法 $.get(..)/$.parseJSON(..)

 

console.debug($.isNumeric(5));
console.debug($.isNumeric("5z"));