jQuery01_jquery简介-CSDN博客

本文链接：https://blog.csdn.net/tooHar/article/details/116797845

本文介绍了jQuery的基础知识，包括其优势、入口函数、$函数的作用、dom对象与jQuery对象的区别、常用方法（如text(), css(), show(), hide()）以及选择器的深入理解，涵盖了基本、层次、过滤和筛选选择器。

摘要由CSDN通过智能技术生成

笔记目录

前言
1. jQuery介绍
2. dom对象和jQuery对象
3. jQuery中的方法
4.jQuery中的选择器
总结

前言

从本章开始学习jQuery，那jQuery是什么呢？它的和原生js相比的优势又是什么呢？
学习内容：jQuery入门，入口函数，$函数，dom对象与jQuery对象，jQuery对象方法，选择器。

1. jQuery介绍

jQuery是什么：jQuery就是一个封装了很多方法的JS库
它的宗旨：write less,do more （写的少,做的多）
介绍：Query是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，通过一个易于使用的、可跨多种浏览器工作的API。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。

1.2 jQuery版本

导入jQuery文件
入口函数
找到你想要操作的元素(选择器),从而去操作他(属性,样式,文本…).

关于版本，jquery到目前为止有三个大版本 1.xxx、2.xxx、3.xxx。需要兼容IE678的可以用1.12.4版的。每一个版本都对应有压缩版和未压缩版.，生产环境推荐用压缩版，开发环境用未压缩版。

1.3 入口函数

1.写法：基本写法，简介写法

        //1.1 基本写法
        $(document).ready(function(){
          console.log('入口函数');   
        });
        // //1.2 简洁的写法
        $(function(){
            console.log('入口函数2');
        });

2.jQuery入口函数与window.onload的区别：

        $(function(){
            //alert('jQuery入口函数');
            console.log($('img').height()); //获取img的高.0
        });

        window.onload = function(){
            //alert('window.onload');
            console.log(document.querySelector('img').offsetHeight);//图片的高
        }

区别：1. window.onload不能写多个，jQuery的入口函数可以写多个 2.执行的时机不同：jQuery的入口函数优先于window.onload执行.
window.onload需要等待页面上所有的资源（dom元素，图片，外部文件…）都加载完毕才执行，jQuery的入口函数只需要等待dom树加载完毕后就执行（如上例）。

1.3 $函数

1.$是什么？

       //2. 去查看jQuery的源码
        // 发现jQuery整体是一个沙箱,往window中暴露jQuery函数. 
        // (function(window){
        //     window.jQuery = window.$ = jQuery; //jQuery是一个函数.
        // }(window));

$是一个函数,是window中的一个方法.和jQuery等价

$函数会根据传递的参数不同，效果也不一样.。

        //a.如果你传的是一个匿名函数,那他就是入口函数
        // $(function(){
        // }); 

        //b.如果你传入的是一个字符串,那他就是选择器,或者创建元素. 
        // $('#btn1')   $('div')
        // $('<a href="http://www.baidu.com">百度一下,你就知道</a>');

        //c.如果你传入的是一个dom对象,那他就会把dom对象转成jQuery对象. 
        //$(dom对象);

2. dom对象和jQuery对象

dom对象
：通过原生js选择器获取到的对象 getElementById(‘div1’)…
特点：只能调用原生js的属性/方法，不能调用jQuery的方法

jQuery对象
：jQuery的选择器获取到的对象：$(’#div1’) $(‘div’)
特点：只能调用jQuery中的方法，不能调用原生js中的属性/方法
jQuery对象是一个伪数组.jQuery对象是dom对象的包装集.

dom对象转jQuery对象

        	let div1 = document.getElementById('div1'); //dom对象
            let $div1 = $(div1); //jQuery对象
            console.log($div1);

jQuery转dom对象

            //a.下标去取. 
            let $div1 = $('#div1');  
            let div1 = $div1[0];
            console.log(div1);

			//b.使用jQuery对象的get方法
            let $divs = $('div');
            let div2 = $divs.get(1);
            console.log(div2);

3. jQuery中的方法

1.text() 获取/设置文本

   $(function () {
      //text(); 获取/设置文本的. 

      //1.获取  text()不给参数就是获取文本. 
      //能获取到标签中的所有文本(自己的文本和后代元素的文本. )
      //如果获取文本的jQuery对象里面有多个dom元素, 那每一个dom元素的文本都会被获取到. 
      $('#getBtn').click(function () {
         //1.1 获取id为div1的文本. 
         //console.log($('#div1').text());
         
         //1.2 获取div们的文本. 
         //console.log($('div').text()); //隐式迭代
      });

      //2.设置  text(文本)给参数就是设置文本.
      //会覆盖原来的内容. 
      //如果设置的文本中有标签,是不会解析标签的,会把标签当做文本的一部分. 
      //如果设置文本的jQuery对象里面有多个dom对象,那每一个dom对象都会设置上文本. 
      $('#setBtn').click(function () {
          //2.1 先设置id为div1的文本. 
          //$('#div1').text('我是设置的<b>文本</b>');
          
          //2.2 设置div们的文本. 
          //$('div').text('我是设置的文本'); //隐式迭代
          
          //补充: 
          //只修改元素的文本,不影响后代元素. 
          //$('#div1').contents()[0].nodeValue = '要替换的文本';
      });
    });

注意：给带后代元素的对象使用text()会覆盖之前的子元素；可以使用$(’#div1’).contents()[0].nodeValue = ‘要替换的文本’，不会影响后代元素

css() 获取/设置样式

  <script>
    $(function () {
      //css();  获取/设置样式

      //1.获取  css(样式名);
      $('#getBtn').click(function () {
        //1.1 获取id为div1的元素的样式. 
        // console.log($('#div1').css('width'));//'200px'
        // console.log($('#div1').css('height'));//'200px'
        // console.log($('#div1').css('background-color'));//'rgb(255, 192, 203)'
        // console.log($('#div1').css('backgroundColor'));//'rgb(255, 192, 203)'
        // console.log($('#div1').css('border'));//'2px solid rgb(255, 0, 0)'
        // console.log($('#div1').css('border-top-width'));//'2px'
        //注意: 获取样式值的时候,最好给一个准确的样式名,不然ie等老浏览器获取不到. 

        //1.2 获取div们的样式.
        //如果获取样式的jQuery对象里面有多个dom元素,那只能获取第一个dom元素对应的样式.  
        //console.log($('div').css('width'));
      });
      
      //2.设置
      //会把样式设置在元素的行内.  
      $('#setBtn').click(function () {  
        //2.1 设置单样式 css(样式名,样式值);
        // $('#div1').css('width',300);
        // $('#div1').css('height','300px');
        // $('#div1').css('backgroundColor','red');
        // $('#div1').css('border-top-width','10px');
        //总结:  样式名必须加引号,复合样式可以使用驼峰命名法,也可以用短线连写. 
        //       样式值如果是数值可以不加引号, 不是数值就一定要加引号. 

        //$('div').css('width','500px'); //有隐式迭代

        //2.2 设置多样式 css({样式名1:样式值1, 样式名2:样式值2});
        // $('#div1').css({
        //   width:300,
        //   'height':'300px',
        //   backgroundColor:'red',
        //   'border-top-width':10
        // });
        //总结: 属性名都不加,遇到连写就用驼峰命名法. 
        //      属性值都加

        $('div').css({
          width:'300px',
          height:'300px',
          backgroundColor:'red',
          borderTopWidth:'10px'
        });    //有隐式迭代
      });

如果获取div们（$(‘div’)选中了多个div）的样式，只能获取第一个的；设置div们的样式可以则有隐式迭代（会设置每一个选中的），可以通过传一个对象，来同时设置多个样式。

.show()和.hide()

.show()方法可以实现元素显示 ==display：block
.hide()方法可以实现元素隐藏 == display：none

index()

索引元素在他兄弟之间的排行，从0开始

mouseenter与mouseleave

mouseenter（）事件，鼠标移上元素触发，可以阻止事件冒泡
mouseleave（）事件，鼠标移开元素触发，可以阻止事件冒泡

事件冒泡：当子元素和父元素有相同的事件时，事件冒泡顺序是逐步向上传播事件：子元素自身->父元素->body->html-document。
事件代理(事件委托):举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
如果父元素ul绑定了一个移入事件，ul里面的li因为事件委托也会触发这个事件，导致的结果就是子元素之间移动会一直触发事件，所以需要使用mouseenter。

4.jQuery中的选择器

4.1 基本选择器

基本选择器和css里面的选择器是一样的
id选择器 $(’#id’)
类选择器 $(".类名")
标签选择器 $(“标签名”)
并集选择器 $(’.box,.box2’)
交集选择器 $(‘li.current’)

4.2 层次选择器

子代选择器： $(’#father>div’)
后代选择器： $(’#father span’)

4.3 过滤选择器

奇数选择器： $(‘li:odd’) （获取到的li元素中，选择索引号为奇数的元素）
偶数选择器： $(‘li:even’) （获取到的li元素中，选择索引号为偶数的元素）
:eq(n) 选择器 $(‘li:eq(0),li:eq(9)’) （获取到的li元素中，选择索引号为0和9的元素，索引号index从0开始）

4.4 筛选选择器

children(selector) | $ (“ul”).children(“li”)； | 相当于$ (“ul>li”)，子类选择器
find(selector) | $ (“ul”).find(“li”)； | 相当于$ (“ul li”),后代选择器
siblings(selector) | $ (“#first”).siblings(“li”)； | 查找兄弟节点，不包括自己本身。
parent() | $ (“#first”).parent()； | 查找父亲
eq(index) | $ (“li”).eq(2)； | 相当于$(“li:eq(2)”),index从0开始
next() | $ (“li”).next()； | 找下一个兄弟
prev() | $ (“li”).prev()； | 找上一次兄弟