day21jQuery的基础知识

最新推荐文章于 2021-10-23 15:47:28 发布

WEB-

最新推荐文章于 2021-10-23 15:47:28 发布

阅读量124

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45637649/article/details/114853635

版权

jQuery

介绍

理念：写得少做得多 (write less, do more)

优点:

\1. 轻量级

\2. 可靠的事件处理机制

\3. 兼容

\4. 文档处理

\5. 完善的ajax

\6. 强大的选择器

\7. 链式调用

\8. 隐式迭代

\9. 开源

\10. 动画效果

jQuery:

最新版本: 3.6.0

1: 兼容ie

>=2: 不兼容ie

地址: https://www.bootcdn.cn/jquery/

https://jquery.com/download/

压缩版: min 工作

未压缩: 开发和学习过程

文档: https://jquery.cuishifeng.cn/

https://www.jquery123.com/

引入

\1. Sources中查看是否被引入

\2. 检验顶级变量是否有

ready

使用

ready DOM结构加载完成

// $(document).ready(function () {
//     // 在这里写你的代码...
//     console.log(2);
// });
// $(document).ready(function () {
//     // 在这里写你的代码...
//     console.log(4);
// });
// $().ready(function(){
//     console.log(5);
// });
// 最常用
$(function(){
    console.log(6);
    // 后续所有代码都在这里
});

区别

onload 和 ready 的区别

\1. onload一个页面中只能写一个, ready在一个页面中可以写多个, 叠加执行

\2. onload没有简写模式, ready有简写方式

\3. ready: DOM结构加载完成 onload: 等待页面及资源加载完成

冲突解决

如果后面的js中的 $把前面的 j q u e r y 的$ 覆盖了, 使用jQuery

<script src="./jquery-3.6.0.js"></script>
<script>
    /* 
        1. Sources中查看是否被引入
        2. 检验顶级变量是否有
    */
    // jQuery $
    console.log(jQuery);
    console.log($);
    /* 
        onload  和 ready 的区别
        1. onload一个页面中只能写一个, ready在一个页面中可以写多个, 叠加执行
        2. onload没有简写模式, ready有简写方式
        3. ready: DOM结构加载完成 onload: 等待页面及资源加载完成
    */
</script>
<script>
    var $ = 30;
    console.log($); // 30  
    // 如果后面的js中的$把前面的jquery的$覆盖了, 使用jQuery
    console.log(jQuery);
    // 使用闭包简写代码
    (function($){
        // 使用$代替jQuery
        console.log($);
    })(jQuery);
</script>

jquery中的 $覆盖了别人的$

<script>
    var $ = 30;
    console.log($); // 30
</script>
<script src="./jquery-3.6.0.js"></script>
<script>
    /* 
        1. Sources中查看是否被引入
        2. 检验顶级变量是否有
    */
    // jQuery $
    console.log(jQuery);
    console.log($); // 函数

    // jquery中的$覆盖了别人的$
    jQuery.noConflict(); // 冲突解决  将$的控制权交给别人
    console.log($); // 30

    // 用闭包简化代码
    (function($){
        console.log($); // 函数
    })(jQuery);
</script>

对象互转

// 原生:
var div = document.querySelector('div');
var div = document.getElementsByTagName('div');
console.log(div[0]);

// jq: $('选择器')
var d = $('div');
console.log(d); // jq对象集合

// 原生: 原生方法只给原生对象用
// jq: jq的方法只给jq对象用

// 互相转换
// 1. jq--->js
console.log(d[0]);
console.log(d.get(0)); // jq对象.get(下标);

// 2. js ---> jq 
// $(js对象)
console.log($(div));
console.log($(div[0]));

选择器

基础选择器

// 基础选择器: 标签  id  类名  分组
$(function(){
    console.log($('li'));
    console.log($('.box'));
    console.log($('#id1'));
    console.log($('div,p,.box'));
});

层级选择器

// 层级选择器: 空格 > + ~
$(function(){
    console.log($('ul li')); // 后代选择器
    console.log($('ul > li')); // 直接子元素选择器
    console.log($('div + p')); // 相邻元素选择器
    console.log($('div ~ li')); // 后面所有的选择器
});

基础过滤选择器

// 基本过滤选择器
$(function(){
    $('ul li:first').css('background', 'red'); // 获取第一个li
    $('ul li:last').css('background', 'red'); // 获取最后一个li
    $('ul li:not(.box)').css('background', 'green'); // not(选择器) 选择类名不是box的元素
    $('ul li:eq(2)').css('background', 'yellow'); // 下标为2的
    $('ul li:gt(2)').css('background', 'pink'); // 下标大于2
    $('ul li:lt(2)').css('background', 'pink'); // 下标小于2
    $('ul li:even').css('background', 'red'); // 下标偶数
    $('ul li:odd').css('background', 'blue'); // 下标奇数
});

属性过滤选择器

// 属性过滤选择器
$(function(){
    $('ul li[tar]').css('background', 'red'); // 含有tar属性的元素
    $('ul li[class=box]').css('background', 'blue'); // 类名为box
    $('ul li[class*=box]').css('background', 'pink'); // 类名包含有box
    $('ul li[class^=a]').css('background', 'red'); // 类名开头为a
    $('ul li[class$=b]').css('background', 'purple'); // 类名结尾为a
    $('ul li[class!=box]').css('background', 'yellow'); // 类名不为box
});

子元素选择器

// 子元素过滤选择器
$(function(){
    $('ul li:first-child').css('background', 'red');
    $('ul li:last-child').css('background', 'red');
    $('ul li:nth-child(even)').css('background', 'pink');
    $('ul li:nth-child(2n+1)').css('background', 'blue');
    // nth-child: number 表达式2n+1 even odd
});

表单和表单属性过滤选择器

// 表单和表单属性过滤选择器
$(function(){
    console.log($(':input')); // 所有的表单元素
    console.log($(':enabled')); // 可用的表单元素
    console.log($(':disabled')); // 不可用的表单元素
    console.log($(':checked')); // 选中的元素
    console.log($(':selected')); // 选中的元素
    console.log($(':radio')); // $(':type的值')
    console.log($(':checkbox')); // $(':type的值')
    console.log($(':password'));
    console.log($(':text'));
    console.log($(':image'));
    // console.log($(':number')); // 报错： date、number

    console.log($('textarea')); // 直接写选择器
});

查找

查找子节点

// 都可以接受一个选择器作为筛选条件
console.log($('ul').children()); // 只会查找一级子节点
console.log($('ul').children('li')); // 只会查找一级子节点
console.log($('ul').children('div')); // 只会查找一级子节点

查找兄弟节点

console.log($('.box').prev().css('background', 'red')); // 紧跟box的上一个元素
console.log($('.box').prevAll().css('background', 'blue')); // box前面所有的
console.log($('.box').prevAll('div').css('background', 'red')); // box前面所有的div

console.log($('.box').next().css('background', 'red'));
console.log($('.box').nextAll().css('background', 'blue'));
console.log($('.box').nextAll('div').css('background', 'red'));

console.log($('.box').siblings().css('background', 'yellow')); // box所有的兄弟节点

查找父节点

// 都可以接受一个选择器作为筛选条件
console.log($('.box').parent()); // 直接父节点
console.log($('#na').parents()); // 所有的父节点  html
console.log($('#na').parents('body')); // 所有的父节点中body

过滤节点

$('li').eq(5).css('background', 'blue'); // li中下标为5的li
$('li').not('.box').css('background', 'orange'); // li中类名不为box的
$('ul').find('.box').css('background', 'pink'); // 在父元素中查找子元素类名为box的元素
$('li').filter('.box').css('background', 'red'); // 在li中 筛选类名为box的元素

操作属性

attr: jq对象.attr(‘属性名’, [‘属性值’]);

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

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

所有属性都可以用attr
prop: q对象.prop(‘属性名’, [‘属性值’]);

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

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

属性为真假(true\false)、固有属性用prop

// 属性为真假(true\false)、固有属性 用prop
// 所有属性都可以用attr

// 获取: 只获取符合选择器条件的第一个的属性的值(text)
// 如果只设置属性名就可以起作用的属性  它在js中的属性值是 true和false
console.log($('div').prop('id')); // box
console.log($('input').prop('checked')); // true
console.log($('div').prop('tar')); // undefined

console.log($('div').attr('tar')); // text

// 设置: jq设置的方法 都是隐式迭代的遍历设置
// 会遍历所有符合条件的元素, 给每一个都设置上
$('div').prop('class', 'a123'); // 设置类名
$('div').attr('tar', '123456');

操作类名

添加类名: jq对象.addClass(‘类名类名2’); 在原有的基础上再去加上几个
删除类名: jq对象.removeClass(‘类名’);
操作类名: jq对象.toggleClass(‘类名’); 有就删除没有就添加
hasClass: jq对象.hasClass(‘类名’);

判断某个元素是否包含某个类名，如果有，返回true, 没有返回false
is: jq对象.is(‘选择器’)

判断jq对象是否是某个选择器, 符合: true 不符合: false

// $('div').addClass('a123 b');

// $('div').removeClass('b');

// jq对象.事件(函数)
$('div').click(function(){
    // $('div').toggleClass('a123');
    // this -- 触发源
    // console.log(this);
    $(this).toggleClass('a123');

    // console.log($(this).hasClass('a123'));
    // if($(this).hasClass('a123') == false){
    //     $(this).addClass('a123');
    // } else {
    //     $(this).removeClass('a123');
    // }

    console.log($(this).is('.a123'));
});

操作样式

操作样式: jq对象.css();

取值: jq对象.css(‘属性名’);

// 第一个
console.log($('div').css('width'));

设置: jq对象.css(‘属性名’, ‘属性值’);

// 适合设置单个样式
// 单词写错不会报错
$('div').eq(2).css('background', 'green');
$('div').eq(2).css('background', 'blue');

jq对象.css({‘属性名’: ‘属性值’, 属性名: ‘属性值’});

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

属性值: 1. 单词 2. 数字可以不加单位, 默认自己添加px 3. 可以写表达式 ‘+=30’
```
$('div').eq(0).css({
    'color': '#fff',
    // 'fontSize': '30px'
    // fontSize: '30px'
    'font-size': '30px',
    // width: 100
    width: '+=30' // 原先宽度上 加30
});
```

操作内容

操作闭合标签

获取

html();

取赋值一体化没有参数表示获取有参数表示设置获取到符合条件的第一个元素的内容
text();

取赋值一体化没有参数表示获取有参数表示设置获取到所有的内容

// 获取元素内容 html可以识别标签  text不可以识别标签
console.log($('div').html()); // 12345
console.log($('div').text()); // 12345123456789123456789123456789123456789

设置

设置: html/text(内容)
特点

\1. 隐式迭代设置 2. 后面的会覆盖前面的

// 设置: html/text(内容)
// 1. 隐式迭代设置 2. 后面的会覆盖前面的
$('div').text('这是新的哈哈哈哈哈');
$('div').text('<i>这是新的哈哈哈哈哈</i>');

$('div').html('再一次!!!');
$('div').html('<b>再一次!!!</b>');

// 在保留原来内容的基础上 添加新内容
var h = $('div').html() + '<i>这是一个斜体</i>';
$('div').html(h);

操作单标签

获取

val(); 取赋值一体化没有参数表示获取有参数表示设置获取到符合条件的第一个元素的内容

console.log($(':input'));
console.log($(':input').val()); // 1332222
console.log($(':radio').val()); // nan
console.log($(':checkbox').val()); // hobby1
console.log($(':checkbox:checked').val()); // hobby2

设置

// 隐式迭代设置
$(':text').val('1551234');
// $(':input').val('1551234');
$(':radio').val(['nv']); // 设置单选按钮 传的参数是一个数组
$(':checkbox').val(['hobby1', 'hobby4']); // 设置复选按钮

$('select').val('tj'); // 操作下拉列表

循环

$.each(遍历对象, 回调函数(下标/属性名, 值));
$.map(遍历对象, 回调函数(值, 下标/属性名));
map具有返回值将每个函数设置的返回值组成一个新的数组返回造成内存浪费

/* 
    集合  对象  数组
    1. $.each(遍历对象, 回调函数(下标/属性名, 值));
*/
var arr = ['a', 'b', 'c', 'd'];
var a = $.each(arr, function(i, v){
    console.log(i, v);
});
console.log(a);
console.log(a == arr);

var obj = {
    name: '彭于晏',
    age: 33,
    height: 187
};
$.each(obj, function(key, val){
    console.log(key, val);
});

$.each($('li'), function(i, v){
    console.log(i, v);
});

// 2. $.map(遍历对象, 回调函数(值, 下标/属性名));
// map具有返回值  将每个函数设置的返回值组成一个新的数组返回 造成内存浪费
var mo = $.map(arr, function(v){
    console.log(v);
    return v + v;
});
console.log(mo);

var m = $.map(obj, function(v, k){
    console.log(k, v);
});
console.log(m);

$.map($('li'), function(v, i){
    console.log(i, v);
});

// 点击每个li  输出每个li的下标
$('li,div').click(function(){
    // console.log(1);
    console.log($(this).index());  // 获取元素在兄弟中的下标 注意布局
});

jq方法特点

jq: 取赋值一体化既可以获取值也可以设置值
获取: 只获取符合选择器条件的第一个的属性的值(text除外)
设置: jq设置的方法都是隐式迭代的遍历设置

会遍历所有符合条件的元素, 给每一个都设置上

WEB-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day21jQuery的基础知识

文章目录jQuery介绍引入ready使用区别冲突解决对象互转选择器基础选择器层级选择器基础过滤选择器属性过滤选择器子元素选择器表单和表单属性过滤选择器查找查找子节点查找兄弟节点查找父节点过滤节点操作属性操作类名操作样式操作内容操作闭合标签获取设置操作单标签获取设置循环jq方法特点jQuery介绍理念：写得少做得多 (write less, do more)优点: \1. 轻量级 \2. 可靠的事件处理机制 \3. 兼容 \
复制链接

扫一扫