js-day20 jq第一天

jQuery

介绍

jquery: js的工具库

事件处理

文档的处理

动画

唯一变量 $ jQuery

强大的选择器

开源

完善的文档

...

jquery:

\1. 官网:

\2. cdn: jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

\3. 文档: jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

版本:

> 2: 不兼容ie

1.xx: 兼容ie

最新版本: 3.6.0

jquery.js: 未压缩 学习

jquery.min.js: 压缩 工作

引入:

\1. 线上

不推荐

\2. 本地

<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
<script src="./js/jquery.js"></script>
<script>
    // 别名: $
    console.log(jQuery);
    console.log($);
    console.log($ == jQuery); // true
    console.log(window.$ == window.jQuery);
​
</script>

冲突解决

jQuery覆盖其他

<script>
    var $ = 30;
    console.log($); // 30
</script>
<script src="./js/jquery.js"></script>
<script>
    console.log($); // 函数
​
    // 冲突解决方法 将$的控制权交给其他
    jQuery.noConflict();
    console.log($);
​
    // 使用自执行函数
    (function ($) {
        console.log($); // 函数
    })(jQuery);
​
</script>

其他覆盖jQuery

<script src="./js/jquery.js"></script>
<script>
    var $ = 40;
    console.log($);
    // 使用自执行函数
    (function ($) {
        console.log($); // 函数
    })(jQuery);
</script>

选择器

基础选择器

基本选择: 标签 类名 id 组合选择器

css选择器怎么写 jq中选择器就怎么写

console.log($('li'));
console.log($('.box'));
console.log($('#six'));
console.log($('#six, .box'));

层级选择器

后代选择器: 父 子

直接子元素: 父 > 子

相邻选择器: 选1 + 选2

兄弟后面的: 选1 ~ 选择2

console.log($('ul li'));
console.log($('ul > li'));
console.log($('.box + div'));
console.log($('li + div'));
console.log($('.box ~ div'));

基础过滤

基础过滤选择器: first last eq gt lt even odd

console.log($('li:first')); // 第一个
console.log($('li:last')); // 最后一个
console.log($('li:eq(0)')); // 获取指定下标的元素
console.log($('li:gt(4)')); // 获取大于指定下标的元素
console.log($('li:lt(4)')); // 获取小于指定下标的元素
console.log($('li:even').css('background', 'red')); // 获取偶数(下标是偶数)
console.log($('li:odd').css('background', 'pink')); // 获取奇数(下标是奇数)
// jq对象.css(属性名, 属性值);
// jq中非语法错误 不会报错

属性过滤

console.log($('li[class]').css('background', 'red')); // 获取带有class属性的li
console.log($('li[class=box]').css('background', 'blue')); // 获取li中class为box的li
console.log($('li[class^=b]').css('background', 'skyblue')); // 获取li中以b字母为开头 
console.log($('li[class$=x]').css('background', 'pink')); // 获取li中以x字母为结尾
console.log($('li[class!=box]').css('background', 'yellow')); // 获取li中class不等于box的li

子元素过滤

子元素过滤: first-child last-child nth-child

$('ul li:first-child').css('background', 'red');
$('ul li:last-child').css('background', 'red');
$('ul li:nth-child(3)').css('background', 'red');

内容过滤

内容过滤: contains empty has parent 了解

console.log($('li:contains(1)').css('background', 'pink'));
console.log($('li:empty').css('background', 'yellow'));
console.log($('li:has(p)').css('background', 'skyblue'));
console.log($('p:parent').css('background', 'red'));

表单过滤

:input 获取所有的表单元素

:type的值

console.log($(':input'));
console.log($(':text'));
console.log($(':password'));
console.log($(':radio'));
console.log($(':checkbox'));
console.log($(':file'));
// console.log($(':date')); // 报错 


// textarea select 直接获取 不需要加:
console.log($('textarea'));

表单属性

console.log($(':enabled'));
console.log($(':disabled'));
console.log($(':checked'));
console.log($(':checkbox:checked')); // 复选框中被选中
console.log($(':selected'));

jq方法特性

\1. 取赋值一体化

既可以获取值 也可以设置值

除了txt 以外 所有方法取值只获取第一个符合选择器条件的元素的值

设置值的时候 迭代设置

\2. 隐式迭代:

每一个方法在设置的时候, 会自动遍历每一个符合选择器的元素并且设置

\3. 链式调用

每个jq方法在执行以后 会将被操作的对象或操作以后的对象返回回来，会了方便下一个方法直接使用

\4. jq对象只能使用jq方法 js对象只能使用js的方法

console.log($('li').css('font-size'));
// console.log($('li').css('font-size', 20));
// var lis = $('li').css('font-size', 20);
// console.log(lis);
// lis.click(function () {
//     console.log(this.innerHTML);
// });

$('li').css('font-size', 20).click(function () {
    // console.log(this.innerHTML);
    console.log(this);
});

查找节点

节点遍历

每个方法都可以接收一个选择器作为筛选条件

console.log($('ul').children()); // 直接子元素
console.log($('ul').children('li')); // 直接li子元素

console.log($('div').parent()); // 直接父元素
console.log($('div').parents()); // 获取到html为止所有的父元素
console.log($('div').parents('body')); 

console.log($('hr').prev()); // 紧跟着hr的上一个元素
console.log($('hr').prevAll()); // hr前面所有的兄弟节点
console.log($('hr').prevAll('li'));

console.log($('hr').next()); // 紧跟着hr的下一个元素
console.log($('hr').nextAll()); // 后面所有的
console.log($('hr').nextAll('div')); // 后面所有的div

console.log($('hr').siblings()); // 获取所有的兄弟节点

节点过滤

console.log($('li').first());
console.log($('li').last());
console.log($('li').eq(3));
$('li').filter('.box').css('background', 'red');
$('li').not('.box').css('background', 'pink');
$('ul').find('.box').css('background', 'skyblue');

操作属性

attr: 可以操作一切属性 不建议属性值为true和false

获取: jq对象.attr('属性名');

设置: jq对象.attr('属性名', '属性值');

移除: jq对象.removeAttr('属性名');

prop: 操作固有属性 建议属性值为true和false

获取: jq对象.prop('属性名');

设置: jq对象.prop('属性名', '属性值');

// console.log($('li').attr('class'));
// console.log($('li').attr('class', 'box abc'));
// $('li').attr('tag', 123);
// console.log($('li').attr('tag'));


console.log($('li').prop('class')); // box a
console.log($('li').prop('class', 'nC'));
console.log($('li').prop('tag', 'aaa'));
console.log($('li').prop('a')); // undefined

// console.log($(':checkbox').attr('checked')); // undefined  checked
// console.log($(':checkbox').prop('checked')); // true
// console.log($(':checkbox').prop('checked', true));

$('li').removeAttr('a');

操作类名

添加: 原有类名的基础上添加

jq对象.addClass('类名 类名');

移除: 原有类名的基础上删除指定

jq对象.removeClass('类名 类名');

切换: 有就删除 没有就添加

jq对象.toggleClass('类名');

判断是否有某个类名: 返回布尔值 true--有 false--没有

jq对象.hasClass('类名');

判断对象是否符合某个选择器:

jq对象.is('选择器');

$('li').addClass('active');
$('li').click(function () {
    // console.log(this); // 触发源
    // $(this).addClass('active');
    // $(this).removeClass('active');
    console.log($(this).hasClass('active'));
    console.log($(this).is('.active'));
    $(this).toggleClass('active');

});

操作样式

jq对象.css();

获取:

jq对象.css(属性名);

设置:

单个: jq对象.css(属性名, 属性值);

多个: jq对象.css({});

{

属性名: 属性值,

属性名: 属性值,

属性名: 属性值

}

属性名: 可以加引号也可以不加 建议加引号

加引号可以使用- 不加引号 使用驼峰命名

属性值:

如果单位是px 省略px 直接写数字

表达式: '+=20' '-=10' 引号必须加

console.log($('div').css('width'));
$('div').css('width', '100px');
$('div').css({
    width: 200,
    height: 300,
    fontSize: 20,
    'font-weight': 800
});

$('div').click(function () {
    $('div').css({
        width: '+=100',
        height: '-=10'
    });
});