[JavaScript知识库]jQuery简介&jQuery选择器&Dom操作

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery是什么？

简单来说，jQuery就是一个javascript库。将javascript中的一些功能进行封装。

jQuery 相对 javascript 的优势：
1.jQuery可以写多个入口函数（window.onload）
2.jQuery的api名字容易记忆
3.jQuery代码简洁
4.jQuery帮助我们解决了浏览器兼容性问题
5.jQuery容错性高，前面的代码出了问题，后面的代码不受影响。


js的缺点：
1.不能添加多个入口函数，如果添加了多个，后面的会覆盖前面的。
2.api名字难记。
3.代码比较冗余。
4.js中有些属性或方法有浏览器兼容问题。
5.js容错率较低，前面的代码写错，后面的代码不能执行。

二、如何使用JQuery？

1.引入jQuery文件

首先需要下载一个JQuery文件。下载链接
详细教程

之后就可以很简单的引入了,例如：

 <script src="../jQuery.js"></script>

2.写一个入口函数

入口函数的作用: 当页面加载完成时，可以形成独立的作用域。

js入口函数与jQuery入口函数的区别：

1. js的入口函数不能写多个，jQuery的入口函数可以有多个
2. 执行时机不同，jQuery入口函数要快于window.onload. jQuery的入口函数等页面上的dom树加载完，就会执行，而window.onload要等待页面上所有的资源（dom树，图片，外部css/js链接…）加载完成后，才会执行。

    <script src="../jQuery.js"></script>
    <script>
        //方法一（常用）
        $(document).ready(function(){

        });   

        //方法二  （常用）
        $(function(){

        });   

        //方法三 （不常用）
        jQuery(document).ready(function(){

        });

        //方法四 （不常用）
        jQuery(function(){

        });



    </script>

之后就可在入口函数中写入想要实现的功能。

三、jQuery 底层原理

1.jQuery文件结构

这里简单介绍一下，可以查看自己下载的jQuery文件仔细研究。

• jQuery文件中是一个自执行函数
  
  

查看jQuery文件可知：

(function(){
window.jQuery = window.$ = jQuery
})

可以尝试在控制台输出一下，得到的结果为true

 <script>
        //console.log(window.$)
        console.log(window.jQuery == window.$);
    </script>

• jQuery自执行文件就是给window对象添加了一个jQuery属性和$属性

引入一个js文件，会执行js文件中的代码，所以引入jQuery文件后，就会执行该文件中的代码，给window对象添加上述两个属性。通过查看jQuery文件，可以知道jQuery和$是等价的,是一个函数。

 console.log(Object.prototype.toString.call($));
 //结果为[object Function]

关于Object.prototype.toString.call()
关于prototype

• $是一个函数

$函数中传递的参数不同，结果也不同。

1. 参数为一个匿名函数： 则变成入口函数

        $(function(){

        });

2. 参数为字符串 - 选择器 / 一个标签（创建该标签）

  $("#nav");
  $("<div>我是一个div</div>")

• 参数为dom对象，则会把dom对象转换为jQuery对象

四、DOM操作

1.DOM对象与jQuery对象

• Dom对象

通过原生js选择器获取
只能调用dom属性或者方法，不能调用jQuery属性和方法

 var  div = document.getElementsByTagName("div");
 div.css('bacgroundColor','green');
 //报错：Uncaught TypeError: div.css is not a function

• jQuery对象

通过jQuery选择器获取
只能调用jQuery的方法和属性，不能调用原生js dom对象的属性和方法

   var div = $("#one")
   div.style.backgroundColor = 'green';
   //报错：Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

jQuery对象是一个伪数组，jQuery对象就是dom的一个包装集

 var div = $("#one")
 // div.style.backgroundColor = 'green';
 console.log(div);
 console.log(div._proto_  === Array.prototype);
 //判断jQuery对象是否为数组
//_proto_属性(前后各两个下划线)，用来读取或设置当前对象的prototype对象。目前所有浏览器(包括IE11)都部署了这个属性。

输出结果：

• jQuery对象转换成dom对象
• dom对象转换为jQuery对象

2.基本操作

1.新建节点

可直接通过$()来完成

    <script>
        $(function(){

            //创建文本节点
            var $li = $('<li>你好</li>')

            $('ul').append($li);

            //创建元素节点

            var $li2 = $('<li></li>')

            $('ul').append($li2);

            //创建属性节点
            var $li3 = $('<li class="set">你好</li>')

            $('ul').append($li3);


        })
    </script>

2.添加节点

• append()

内部添加，将标签作为父元素的最后一个子元素

用法如下：

            $('#btnAppend').click(function(){
               // 1.新创建一个li标签  
                //该li标签作为最后一个子元素添加进ul中

                var newLi = $("<li>我是新创建的li标签</li>");
                $('#ul1').append(newLi);


                //2.选择已经存在的li标签
                //该li标签将会被剪切，变成ul中最后一个元素
                var newLi3 = $('#li3');
                $('#ul1').append(newLi3);

               // 3.选择另外ul中的li标签
                //则将该li剪切，放入ul中，作为最后一个元素

                var newLi2 = $('#li2');
                $('#ul1').append(newLi2);
            })

• appendto()

内部添加，将标签作为元素的最后一个子元素
语法： 添加的元素. appendto( 父元素 )

用法同append

• prepend()

内部添加，将标签作为父元素的第一个元素

用法同append

• after()

外部添加，将标签放在指定元素的后面

            //after方法
            $('#btnAfter').click(function(){
                var $newdiv = $('<div>我是新建的div标签</div>')
                $('#ul1').after($newdiv);
            })

• before()

外部添加，将标签放在指定元素的前面

用法同after（）

3.删除清空节点

• remove()

移除目标节点

            // 移除节点
            $('#btnRemove').click(function(){
                $('#ul1').remove();
            })

• empty()

清空目标节点的内容，目标节点还存在

            //清空节点
            $('#btnEmpty').click(function(){
                $('#ul1').empty();
            })

可尝试输入比对一下。

注意：$( 目标节点 ).html ( ) 也可以清空节点内容，但是不能清空内容的事件，可能会造成内存泄漏，所以一般不使用该方法清空内容

4.修改节点

• 克隆节点 clone()

clone( ) 可以复制相应的节点，方法中的参数，true表示复制目标所带的事件，false表示不复制目标的事件

            $('#btnClone').click(function(){
                var cloneDiv = $('.div1').clone(true);
                $('body').append(cloneDiv);
            })

• 替换节点 replaceAll() ，replaceWith（）

replaceWith() 和 replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。

两者的不同在于语法格式：
(被替换目标) . replaceWith( 新的目标 )
(新的目标) . replaceAll(被替换目标 )

            var $li = $('<li>我是替换的li标签</li>')
            // $('#one').replaceWith($li);
            // $li.replaceAll($('#one'));
            $('#one').replaceWith('<li>我是替换的li标签</li>')

5.其它

属性操作

1.html属性操作

• attr() 和 removeAttr()

            console.log($('.div1').attr('class'));
            // console.log($('.div1').attr('id'));
            $('.div1').attr('class','bc');
            //会将原来的class值覆盖掉,所以此时已经没有div1这个类了
            // console.log($('.div1').attr('class'));
            // 设置多个值使用对象存储，如果设置多个类名不能使用attr()方法
            $('div').attr('class','go');
            $('div').attr({
                'name' : 'box'
            })

            //删除单个属性
            // $('div').removeAttr('class');
            //移除多个属性
            // $('div').removeAttr('class name')

2.Dom属性操作

• prop() 和 removeProp()

   //prop方法 设置获取属性值（该属性值应该不是css样式，因为没有看到html内容有变化）
            // $('div').prop('color',"red");
            // $('div').prop('width',"400px");
            $('div').prop({
                'color' : 'red',
                'width': '400px'
            })
            console.log($('div').prop('width'));
            
            //移除prop生成的属性
            //$('div').removeProp('color');
            //该写法无效，必需带有参数
            $('div').removeProp();
            console.log($('div').prop('color'));
            console.log($('div').prop('width'));

更多关于prop

prop() 方法应该用于检索属性值,如需检索 HTML 属性，请使用 attr() 方法代替。

3.类样式操作

• 添加类 addClass

            $('#add').click(function(){
                alert(1);
                //添加一个类
                //$('.one').addClass('fontSize');

                //添加多个类
                $('.one').addClass('fontColor width200')
            })

• 移除类 removeClass

            $('#remove').click(function(){

                //移除所有的类
                $('.one').removeClass()

                //移除单个/多个类
                //$('.one').removeClass('width200');
            })

• 切换类 toggleClass

            //多次点击可以移除或添加该类
            $('#toggle').click(function(){
                $('.one').toggleClass('bc')
            })

• 判断是否含有某类 hasClass

            $('#has').click(function(){
               console.log( $('.one').hasClass('fontColor'));

            })

4.值操作

• 获取设置文本 text（）

text（）获取文本时，会获取目标中所有的文本内容（不包含标签），包括后代元素
text（）设置内容时，新写的内容会覆盖原来的内容，将标签转换为文本

        $(function(){
            //获取文本
           console.log( $('.div1').text());

           //设置文本
           $('#setText').click(function(){
               $('.div1').text('我是新设置的内容');
               $('.div1').text('我是新设置的内容<a>点击</a>');
               
           })
        })

• 获取html html()

和text（）类似，但是html（）获取的内容包含标签，设置内容时，内容中的标签会生效

• 获取value值 val（）

通过val() 来获取设置表单元素的属性值

操作简单

          console.log( $('#setText').val());
          $('#toggle').val('切换类');

6.遍历节点

• each()

遍历对象元素或数组，隐式迭代给同一类元素进行相同的操作，当进行不同的操作时，需要用到遍历

$(this).each(function(index,element)) 遍历每一个对象，index是选择器的索引号，element 是DOM元素对象，不能使用jquery的方法

• children()
  $( ’ ’ ).children() 匹配元素的子代节点，不包括后代节点
  

• parent()
  匹配元素的父亲节点

• siblings()
  匹配元素的兄弟节点

• next()
  匹配元素的下一个兄弟节点

• prev()
  匹配元素的上一个兄弟节点

• closest()
  $(’ ').closest( selector ) 沿 DOM 树向上遍历，直到找到已应用选择器的第一个匹配为止。 more

7.css-dom操作

• css()

css（样式名）可以获取元素的某个样式
获取多个dom元素的jQuery对象样式，只能获取到第一个元素的样式
css（样式名，样式值 / 对象{ 样式名，样式值 }）设置样式为行内样式，可以给单个或多个元素设置样式

             //css（）
             //获取某个样式
             console.log($('.div1').css('width'));
             //设置某个样式
             $('.div1').css('backgroundColor','green');

             //设置多个样式
             $('.div1').css({
                 height:200,
                 'width': '250px',
                 'backgroundColor': 'yellow'

             })

             //给多个对象设置样式
             $('div').css({
                 'backgroundColor': 'pink'
             })

• position()

position（）获取距离有定位的父元素的距离

• offset()

offset()获取元素距离document的距离

• scrollTop() 和 scrollLeft()

scrollTop() 获取元素被卷曲的高度，scrollLeft() 获取元素被卷曲的宽度

  //获取某元素的卷曲值
  console.log($('.pic').scrollTop() +"和"+$('.pic').scrollLeft());
  //获取页面的卷曲值              
  console.log($(window).scrollLeft()+'和'+$(window).scrollTop());
               

五、jQuery选择器

jQuery选择器返回值为对象

1.基本选择器

和css选择器用法一样

2.层级选择器

和css选择器用法一样

3.过滤选择器

比较简单

4.筛选选择器

清晰易懂

推荐应用案例：下拉菜单

5.表单筛选器

6.属性选择器