jQuery简介

jQuery是什么?

jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式,封装好了的js的函数库。

Javascipt跟jQuery的区别:

Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发。

jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到。

 

jQuery-1.11.3js            开发版:编写代码的时候可能会出现一些问题,去看源码的设计思路,只是参考

jquery-1.11.3.min.js     生产版:当编码完成,测试通过,上线时更换此版本

二者的内容,功能都是相同的,只是大小的问题,带min的是经过压缩以后的,去掉了所有的空格和换行,主要是减小占用的空间,形参进行了更改

 

 语法

jQuery(document).read(function(){ });

$(function(){ });// **

window.onlaod = function(){}

$ === jQuery // $是jQuery全局函数的别名。

console.log($)

$()     //传递不同的参数返回不同的值

 

 

jQuery和DOM对象的区分:

 

jQuery对象必须用jQuery的方法,dom对象必须用操作dom的方法,两个不能混写

 

<head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.3.js"></script>
    </head>
    <body>
        <input type="text"  class="username" value="请输入用户名" />
        
        
        <script type="text/javascript">

            
            var username = document.getElementsByClassName("username")[0];
            console.log(username)   //输出的是一个DOM对象
            username.style.backgroundColor = "#f00";
            
            var $username = $(".username");
            console.log($username)  //输出的是jquery对象,是类数组。
//            不管你用什么方式获取过来的全都是类数组,jquery操作也是操作这个类数组
            $username.css("color","#fff")
            
            
            

//            jquery对象必须用jquery的方法
//            dom对象必须用操作dom的方法
//            两个不能混写
            


        </script>
    </body>
</html>

jQuery选择器

  •  ID选择器(js一般尽量用ID选择器,效率最高)(重点)

                    $("#id").html();

  •  类选择器(重点)

                     $(".className").text();

  •  标签选择器(重点)

                     $('p').click();

  •  属性选择器

                    $("li[id]")、 $("li[id='link']").fadeIn();

  •  层级选择器(重点)

                     $("li .link").show();

  •  父子选择器

                    $("ul > li")

  •  伪类选择器

                     $("p:first")

                     $("ul li:eq(3)")

  •  表单选择器

                     $(":text")

                     $(":checkbox")

                     $(":checked")

详细情况可查看手册

posted @ 2018-12-27 16:20  文艺小青年啊  阅读(328)  评论(0编辑  收藏  举报