jQJuery操作

初识jQuery

什么是 jQuery

jQuery 是一个优秀的 JavaScript 库，是一个由 John Resig 创建于 2006 年 1 月的开源项目。jQuery 是一个快速、小型、功能丰富的 JavaScript 库。其设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。

jQuery 的作用

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和Ajax 交互，学习 jQuery 的本质就是学习如何调用这些函数。

jQuery 的优势

jQuery 强调的理念是写得少，做得多（write less, do more），jQuery 独特的选择器、链式操作、事件处理机制和封装完善的 ajax 都是其他库望尘莫及的。概括起来，jQuery 有以下优势。

● 轻量级，核心文件才几十 kb。

● 简化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

● 强大的选择器功能。

● 链式操作、隐式迭代。

● 丰富的插件支持。

● 免费、开源。

下载

1、英文官网：https://jquery.com/

2、中文官网：https://www.jquery123.com/

3、cnd：https://www.bootcdn.cn/jquery/

类库说明

jQuery 库的类型分为两种，分别是生产版本（最小化和压缩版）和开发版（未压缩版），它们的区别是：

开发版：完整无压缩版本，主要用于测试、学习和开发

生产版：经过工具压缩或经过服务器开启 Gzip 压缩，主要应用于产品和项目

版本介绍

jQuery 库分为 1.x 的版本和 2.x、3.x 的版本，1.x 的版本兼容 IE678，而 2.x、3.x 的版本不兼容 IE678。

引入jQuery

jQuery 不需要安装，他就是一个 js 文件，把下载的 jQuery 放到一个公共的位置，想要在某个页面上使用 jQuery 时，只需要在相关的 HTML 文档中引入该库文件即可。

一般可以放在 head 标签中或者标签前面，但是一定要注意，要在其它 js 文件前面引入 jQuery 库。

当我们需要使用 jQuery 的时候，会在 HTML 文档中引入 jquery.js,可以通过以下两种方式引入：

<!-- 引入本地文件 -->
<script src="js/jquery.js"></script>
<!-- 引入线上文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

什么是$

$是jQuery的别名，也可以使用jQuery替代，但是为了方便，会直接使用$。

$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery 对象，就可以调用 jQuery 的方法。

使用

页面加载

// 页面加载
// 原生：页面中使用的html\css\js\图片\音视频都加载完成，才能触发
window.onload = function () {
    console.log('我是原生的，我加载完成了');
}


// jQuery：只要文档加载完成就能触发
$(document).ready(function () {
    console.log('我是jQuery，我加载完成了');
});
// jQuery简写
$(function () {
    console.log('我是jQuery的简写，我加载完成了');
})

// ----------------------
// $(document).ready(function (){}) 同 window.onload = function (){}的区别：
// 1、执行时机不同，window.onload 必须等待网页中文档和资源都加载完成才能执行，而$(document).ready()是等文档加载完成后调用。
// 2、window.onload 只能写一个，多个时后面的会覆盖掉前面的，而$(document).ready()可以写多个，不会覆盖。
// 3、window.onload 没有简写形式，而$(document).ready()可以简写成$(function(){})。

DOM对象和JQ对象

<div id="box"></div>
<script>
    $(function () {
        // 两者可以共存，不能混用(原生不能使用jq的方法，jq也不能使用原生的方法)。

        // DOM对象：原生方法获取的元素，只能使用原生的方法
        var box = document.getElementById('box');
        console.log(box);

        // jQuery对象：通过jQuery方法获取的元素，只能使用jQuery的方法
        var $box = $('#box');
        console.log($box);
    })
</script>

互转

$(function () {

    // jq转原生
    var $box = $('#box');
    var $li = $('li');
    // console.log($box);
    // console.log($li);

    // 方式一：jq对象[下标]
    console.log($box[0]);
    console.log($li[1]);

    // 方式二：jq对象.get(下标)。如果不传下标，返回的是一个数组，传下标，返回的是下标对应的元素
    console.log($box.get());
    console.log($li.get());

    // --------------------------------------------
    // 原生转jq:  $(原生)
    var box = document.getElementById('box');
    console.log($(box));

})

jQuery与原生方法可以共存但不能混用

var all = $('#all');
var inputs = $('div input');

all.click(function() {
	//jQuery与原生方法共存
      inputs.prop('checked', this.checked);
            
   });

   inputs.click(function() {
   var inp = $('div input:checkbox:checked');

   all.prop('checked', inputs.length === inp.length);
        });

选择器

选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 ajax 操作都依赖于选择器。如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

jQuery 中的选择器完全继承了 CSS 的风格。利用 jQuery 选择器，可以非常便捷和快速地找出特定的 DOM 元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习 jQuery 的基础，jQuery 的行为规则都必须在获取到元素后才能生效。

基本选择器

基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class和标签名等来查找 DOM 元素。可以使用这些选择器来完成绝大多数的工作。

<div id="box">小张</div>
<p class="abc">小耗子</p>
<ul class="ul1">
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>
<ul class="ul2">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

<script>
    $(function () {
		$('#box').css('background', 'red');
        $('.abc').css('background', 'pink');
        $('li').css('background', 'yellow'); // jQuery帮我们循环了

        $('#box, .abc, .ul1 li').css('border-bottom', '2px solid green');
    })
</script>

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

<ul>
    <li>
        <ol>
            <li>html</li>
            <li>css</li>
            <li>js</li>
        </ol>
    </li>
    <li>吃饭</li>
    <li class="abc">睡觉</li>
    <li>打豆豆</li>
    <li>小张</li>
</ul>
<script>
    // 如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

	$('ul li').css('border-bottom', '3px solid green'); // 后代选择器
    $('ul').find('li').css('border-bottom', '3px solid green');

    $('ul>li').css('border-bottom', '3px solid green'); // 子代选择器
    $('ul').children().css('border-bottom', '3px solid green');

    $('.abc + li').css('background', 'pink'); // 下一个兄弟元素
    $('.abc').next().css('background', 'pink');

    $('.abc ~ li').css('background', 'pink'); // 下面所有的兄弟元素
    $('.abc').nextAll().css('background', 'pink');
</script>

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号开头

<ul>
    <li>00</li>
    <li>11</li>
    <li>22</li>
    <li class="abc">33</li>
    <li class="abc">44</li>
    <li>55</li>
    <li>66</li>
    <li>77</li>
</ul>

$('li:first').css('background', 'red'); // 第一个元素
$('li').first().css('background', 'red');

$('li:last').css('background', 'red'); // 最后一个元素
$('li').last().css('background', 'red');

$('li:eq(3)').css('background', 'green'); // 下标为3的
$('li').eq(3).css('background', 'red');


$('li:odd').css('background', 'green'); // 下标为奇数
$('li:even').css('background', 'yellow'); // 下标为偶数数
$('li').odd().css('background', 'red');
$('li').even().css('background', 'green');

$('li:not(.abc)').css('background', 'red'); // 排除.abc
$('li').not('.abc').css('background', 'yellow');


$('li:lt(3)').css('background', 'green'); // 下标小于3的
$('li:gt(3)').css('background', 'green'); // 下标大于3的
$('li:lt(5):gt(2)').css('background', 'pink'); // 下标小于5大于2的区间

表单选择器

为了使用户能够更灵活地操作表单，jQuery 中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

• $(’:checked’); // 选取所有被选中的 input 标签
• $(’:input’); // 选取所有 input textarea select button 元素
• $(’:text’); // 所有单行文本框，即类型为：type=“text”
• $(’:password’); // 密码框
• $(’:radio’); // 单选框
• $(’:checkbox’); // 多选框
• $(’:submit’); // 提交按钮
• $(’:reset’); // 重置按钮
• $(’:button’); // 普通按钮
• $(’:file’); // 上传域

<form action="">
    <input type="text">
    <input type="password" name="">
    <input type="radio" name="" checked>
    <input type="checkbox" name="" checked>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
    <input type="file" name="">
</form>

<script>
	console.log($(':input')); // 所有的input select textarea button 
    console.log($(':password')); // 获取密码框
    console.log($(':checked')); // 选取选中的 checkbox radio option
</script>

下标

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

<script>
    // 需求：一组列表，点击某一个，打出它的下标

    // 原生绑定点击事件：元素.onclick = function(){}
    // jQuery绑定点击事件：jQuery对象.click(function(){})

    // 下标: jQuery对象.index()

    $('li').click(function () {
        // console.log(this);  this是原生的

        console.log($(this).index()); // 下标
    });

</script>

节点遍历操作 （隐式迭代）

遍历父节点

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>
    console.log($('.box3').parent()); // 父级
    console.log($('.box3').parents()); // 祖先级
    console.log($('.box3').parents('div')); // 祖先级
</script>

兄弟节点

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li class="abc">44</li>
    <li>55</li>
    <li>66</li>
</ul>

<script>
    $('.abc').next().css('background', 'red'); // 下一个兄弟
    $('.abc').nextAll().css('background', 'red'); // 下面所有的兄弟
    $('.abc').prev().css('background', 'red'); // 上一个兄弟
    $('.abc').prevAll().css('background', 'red'); // 上面所有的兄弟
    $('.abc').siblings().css('background', 'green'); // 所有的兄弟

    // 过滤和排除
    $('li').filter('.abc').css('background', 'pink'); // 过滤，找到.abc
    $('li').not('.abc').css('background', 'brown'); // 排除.abc
</script>

遍历子节点

<ul>
    <li>
        <ol>
            <li>html</li>
            <li>css</li>
            <li>js</li>
        </ol>
    </li>
    <li>吃饭</li>
    <li class="abc">睡觉</li>
    <li>打豆豆</li>
    <li>小张</li>
</ul>
<script>
    $('ul').children().css('border-bottom', '2px solid green'); // 孩子
    $('ul').children('.abc').css('border-bottom', '2px solid green'); // 接收一个参数，可以过滤

    $('ul').find('li').css('border-bottom', '2px solid green'); // 找子孙节点，一定要有参数
</script>

元素操作

文本及值的操作 （渲染操作）

// innerHTML
// 获取：jQuery元素.html();
// 设置：jQuery元素.html(值);
console.log($('#box1').html());
$('#box1').html('没<i>吃饱</i>');


// innerText
// 获取：jQuery元素.text();
// 设置：jQuery元素.text(值);
console.log($('#box2').text());
$('#box2').text('没<i>吃饱</i>');


// value
// 获取：jQuery元素.val();
// 设置：jQuery元素.val(值);
console.log($('input').val());
$('input').val('不是老王');

遍历

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<script>
    // 一组li，将它的下标写为它的内容

    // jQuery对象.each(function (index, item) { });
    // index下标   item即每一项，且item是原生的

    $('li').each(function (index, item) {
        // console.log(index, item);

        // item.innerHTML = index; // 原生的
        $(item).html(index); // jq
    });
</script>

属性操作

attr

// attr---- attribute
// 获取：jQuery对象.attr(属性名);
// 设置：jQuery对象.attr(属性名，值);
// 删除：jQuery对象.removeAttr(属性名);

var div = $('#box');

// 默认属性
console.log(div.attr('title')); // 获取
div.attr('title', '人在飞'); // 设置

// 自定义属性
console.log(div.attr('abc'));
div.attr('abc', '平头姐');

// 删除属性
div.removeAttr('abc')
div.removeAttr('title')

prop

// 我们还有一个 prop()方法同 attr()方法很像，也是操作属性，但是它同 attr 有区别：
// 1、在操作固有属性时，应该使用 prop
// 2、只存在 true/false 属性，应该使用 prop
// 在开发过程中除 checked 属性建议是用 prop 操作以外，其他属性都使用 attr 操作。

// 获取：jQuery对象.prop(属性名);
// 设置：jQuery对象.prop(属性名, 值);
// 删除：jQuery对象.removeProp(属性名);

// checkbox选中
console.log($(':checkbox').prop('checked')); // 获取
$(':checkbox').prop('checked', true);

// 按钮禁用
console.log($('button').prop('disabled'));
$('button').prop('disabled', true);

样式操作

    /*1.设置一个样式*/
    //两个参数  设置的样式属性,具体样式
    $('li').css('color','red');
    //传入对象（设置的样式属性:具体样式）
    $('li').css({'color':'red'});
    /*2.设置多个样式*/
    $('li').css({
        'color':'green',
        'font-size':'20px'
    });

类名操作

   /*1.添加一个类*/
    $('li').addClass('now');
    /*2.删除一个类*/
    $('li').removeClass('now');
    /*3.切换一个类  有就删除没有就添加*/
    $('li').toggleClass('now');
    /*4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
    $('li').hasClass('now');