jQuery基本使用

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

基本介绍

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互.

学习jQuery本质:就是学习调用这些函数(方法)。

JavaScript库

即library，是一个封装好的特定的集合（方法和函数)。

入口函数

等页面DOM加载完毕再执行JS代码

//第一种
$(document).ready(function() {
           代码
        })

//第二种
$(function() {
代码
        })

jQuery的顶级对象$

$是jQuery的顶级对象，相当于原生JavaScript中的window。

---

基本使用

DOM对象和jQuery对象

  1.用原生JS获取来的对象就是DOM对象

  2.jQuery方法获取的元素就是jQuery对象。

  3.jQuery对象本质是∶利用$对DOM对象包装后产生的对象（伪数组形式存储)。

  jQuery对象只能使用jQuery方法，DOM对象则使用原生的 Javascirpt属性和方法

DOM对象与jQuery对象之间相互转换

因为原生js比 jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

使用：引入jQuery文件，在入口函数写代码

DOM对象转换为jQuery对象：$(DOM对象)

//（1）直接获取，得到的就是jQuery对象

 $('video');

//(2)使用原生JS获取DOM对象，用$包装

 var myvideo = document.querySelector("video");

 $(myvideo);

jQuery对象转换为DOM对象

//(1)

 $('video')[0].play();

 //(2)

 $('video').get(0).play();

---

常用API

jQuery选择器

基础选择器：$(“选择器”)

筛选选择器

 $('ol li:odd').css('color','red')//筛选索引号为奇数的元素
 $('ol li:even').css('color','blue')//筛选索引号为偶数的元素

筛选方法

		//parents()可以直接获取所有祖先元素
        $('.four').parents();
        //parents()可以直接获指定祖先元素
        $('.four').parents('.one')
        //jQuery得到当前元素索引号    
        $(this).index)

jQuery样式操作

操作css方法

参数只写属性名，则是返回属性值

console.log($('div').css('width'));

$(‘div’).css(‘属性’,‘值’); 值是数字的话可以不加引号和单位

$('div').css('width','300px');

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加号，如果是复合属性采用驼峰命名法

$('div').css({
           'color': 'red',
           'font-size': '30px'
            })

设置类样式

添加类     $('div').addClass('类名');

移除类     $('div').removeClass('类名');

切换类      $('div').toggleClass('类名');

jQuery类和className区别:

className覆盖原先类名
jQuery类操作对指定类进行操作，不影响原先类名

隐式迭代

遍历内部 DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

隐式迭代是对同一类元素做了同样的操怍。

 	<div>N奈斯先生</div>
    <div>N奈斯先生</div>
    <div>N奈斯先生</div>
    <div>N奈斯先生</div>

 $('div').css('background', 'skyblue'); //给所有div设置背景色

链式编程

就是进行连续编程

<button>快速</button><button>快速</button><button>快速</button>

 $(function () {
            $('button').click(function () {
                /* $(this).css('background', 'blue').siblings('button').css('background', ''); */
                $(this).siblings().css('color','red');
            });
        })

jQuery效果

显示隐藏效果

显示效果 show([speed,[easing],[fn]]) 参数可以省略
隐藏效果 hide([speed,[easing],[fn]]) 参数可以省略
切换效果 toggle([speed,[easing],[fn]]) 参数可以省略

$(function () {
            $('button').eq(0).click(function () {
                //显示
                $('div').show(1000, function () {
                    alert('123')
                });
            })
            $('button').eq(1).click(function () {
                // 隐藏
                $('div').hide();
            })
            $('button').eq(2).click(function () {
                // 切换
                $('div').toggle(1000);
            })
        });

滑动效果

下滑动 slideDown([speed,[easing],[fn]]) 参数可以省略
上滑动 slideUp([speed,[easing],[fn]]) 参数可以省略
切换滑动 slideToggle([speed,[easing],[fn]]) 参数可以省略

事件切换hover，鼠标经过和离开的复合写法

hover(function () { }, function () {});
//如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

自定义动画 animate(params,[speed],[easing],[fn])
添加的元素要加定位

 $(function () {
            $('button:first').click(function () {
                $('div').animate({
                    left: 500,
                    top: 300,
                    width: 300,
                    height: 300,
                    opacity: .4
                }, 800)
            })
        })

jQuery属性操作

设置获取元素固有属性 prop()
设置获取元素自定义属性 attr(‘属性’)
数据缓存 data()
:checked查找被选中的表单元素。
最后计算的结果如果想要保留2位小数通过toFixed(2)方法

<!-- 固有属性 -->
<a href="https://blog.csdn.net/qq_54200067/article/details/121566887?spm=1001.2014.3001.5501">点我</a>
    <input type="checkbox" name="" id="checked">
    <!-- 自定义属性 -->
    <div index='1' data-index="3">div</div>
    <!-- 数据缓存 -->
    <span></span>

$(function () {
// 1.元素固有属性:元素本身自带的属性，比如<a>元素里面的href
            // element.prop("属性名")获取属性值
            var href = $('a').prop('href');
            // 设置属性值 prop('属性','属性值')
            $('a').prop('title', 'woshi')
            //判断属性状态
            $('input').change(function () {
                console.log($(this).prop('checked'));
            })
// 2.设置获取元素自定义属性 attr('属性')
            console.log($('div').attr('index'));
            // 设置属性 attr('属性','属性值')
            console.log($('div').attr('index',2));
            //获取H5自定义属性
            console.log($('div').attr('data-index'));
//3.数据缓存data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
            //附加数据
            $('span').data('uname','N');
            // 获取数据
            console.log($('span').data('uname'));
            // 同时，还可以读取HTML5自定义属性data-index ,得到的是数字型
            console.log($('div').data('index'));
        })

jQuery文本属性值

//1.获取元素内容 html(),包含标签
        console.log($('div').html());
        //修改
        $('div').html('123')
        //2. 获取文本内容 text()
        console.log($('div').text());
        //修改
        $('div').text('123')
        //3.获取设置表单值 val()
        console.log($('input').val());
        //修改
        $('input').val('123')

jQuery元素操作

 $(function () {
            //创建元素
            var li = $('<li>后来的li</li>');
            var div = $('<div>后来的div</div>');
            //添加元素
            // 内部添加
            // $('ul').append(li); //内部添加并且放到内容的最后面
            $('ul').prepend(li); //内部添加并且放到内容的最前面
            // 外部添加
            // $('.test').after(div);//外部添加并且放到内容的最后面
            $('.test').before(div); //外部添加并且放到内容的最前面
            // 删除元素
            $('ul').remove(); //删除匹配的元素(本身)
            $('ul').empty();//删除匹配的元素集合中所有的子节点
            $('ul').html();//清空匹配的元素内容
        })

jQuery尺寸、位置操作

offset(设置或获取元素偏移

修改位置：在offset里写一个对象

获取距离带有定位父级位置（偏移) position() ,如果没有带有定位的父级，则以文档为准

面试题

一、BOM事件处理程序?

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开
头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种

二、BOM对象方法?

主要说一下系统对话框:
浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息

消息框:alert， 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

输入框:prompt，返回提示框中的值。

prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。

确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可