jQuery jQuery选择器 jQuery的筛选器 jQuery的属性操作 jQuery 的class属性 隐式迭代

jQuery

<!-- 加载外部jQuery程序 -->
    <script src="./jquery.min.js"></script>
    <script>
    // 什么是jQuery
    //     jQuery是 一个前端的方法库
    //     也就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能

    // jQuery的网站
    //     官网 : https://jquery.com/
    //  中文网站 : http://jquery.cuishifeng.cn/

    // jquery的三大优点
    //     1,强大的选择器机制 --- 方便获取标签对象
    //     2,优质的隐式迭代 --- 默认对数组中的所有标签,进行操作
    //     3,无所不能的链式编程 --- 再复杂的操作,一行代码搞定

    // 如何使用jquery
    //     1,通过外部程序,加载jQuery文件
    //       可以是本地文件,也可以是网上的文件
    //     2,通过 $ 或者 jQuery 的形式 来调用执行jQuery中定义的方法

    console.dir($);
    console.dir(jQuery);
</script>

jQuery 选择器

<script>
    // 选择器 --- 获取标签对象
    
    // JavaScript中,有JavaScript获取标签的方式
    // 有的是一个标签对象,有的是一个标签对象的伪数组
    // document.getElementById
    // document.getElementsByClassName
    // document.getElementsByName
    // document.getElementsByTagName
    // document.querySelector
    // document.querySelectorAll

    // jQuery中,也有自己获取标签对象的方式
    // 即时只有一个符合的标签,获取的结果,也是一个伪数组
    // 不管怎么获取,获取到的都是一个伪数组
    
    // 通过标签名称
    // console.log($('div'));
    // 通过id属性值
    // console.log($('#div1'));
    // 通过class属性值
    // console.log($('.div1'));
    // 通过标签属性和属性值
    // $('[属性="属性值"]')
    // console.log($('[name="div1"]'));

    // 通过标签结构 ul中的所有子级li
    // console.log($('ul>li'));
    // 通过伪类选择器 
    // ul中子级第一个li
    // console.log($('ul>li:first'));
    // ul中子级最后一个li
    // console.log($('ul>li:last'));
    // ul中子级li,索引下标是奇数的标签
    // console.log($('ul>li:odd'));
    // ul中子级li,索引下标是偶数的标签
    // console.log($('ul>li:even'));
    // ul中子级li,索引下标是2的标签
    // console.log($('ul>li:eq(2)'));


    // 总结:
    // 只要是标签有的,只要是css能写的,都可以作为获取标签对象的方法
    // 获取到的是标签对象伪数组

    // 获取到的是一个伪数组
    // 可以forEach,但是要用jQuery的forEach方法,不能用JavaScript的forEach语法
    // for...in,可以使用,但是获取到的内容,太多太多了,我们也不用

    // $('ul>li').forEach(function(item){
    //     console.log(item);
    // })
    
    // for(let i in $('ul>li')){
    //     console.log( i );
    // }


    // 总结:
    // jQuery获取的标签对象,不要直接使用JavaScript的语法形式来操作
    // JavaScript的标签对象,也不要直接使用jQuery的语法形式来操作

    // 这是两种完全不同的语法形式,获取到的标签对象,也完全不同

    // 但是可以相互转化

    // jQuery标签对象[索引下标] --- 转化为指定的标签对象,就可以使用对应的JavaScript语法形式
    // $(JavaScript标签对象) --- 转化为jQuery标签对象,可以使用jQuery语法形式

    // jQuery语法获取的所有ul中子级li标签
    console.log($('ul>li')) ;

    // jQuery语法获取的所有ul中子级li标签,其中索引是0的指定标签
    console.log($('ul>li')[0]); 

    // 通过JavaScript语法,获取到一个标签对象
    const oDiv = document.querySelector('div');
    console.log(oDiv); 
    
    // 转化为jQuery标签伪数组
    console.log( $(oDiv) );
</script>

jQuery的筛选器

    // 什么是jQuery的筛选器
    // 在通过选择器,获取到标签对象的基础上,再来进行筛选,选择出符合条件的标签对象
    // 选择器一定是在选择器的基础上使用
    // 为了链式编程方便

    // 筛选器的执行结果,也一定是一个伪数组

    // 获取ul中,所有子级li标签
    // $('ul>li');

    // li标签伪数组中,第一个标签对象,也是伪数组
    // console.log( $('ul>li').first() );

    // li标签伪数组中,最后一个标签对象,也是伪数组
    // console.log( $('ul>li').last() );

    // li标签伪数组中,按照索引下标获取
    // console.log( $('ul>li').eq(2) );

    // 当前标签的上一个兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).prev() 索引是2的第三个标签的上一个兄弟标签,也就是索引是1的第二个标签
    // console.log( $('ul>li').eq(2).prev() );

    // 当前标签的下一个兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).next() 索引是2的第三个标签的下一个兄弟标签,也就是索引是3的第四个标签
    // console.log( $('ul>li').eq(2).next() );


    // 当前标签之前的所有兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).prevAll() 索引是2之前的所有标签
    // console.log( $('ul>li').eq(2).prevAll() );

    // 当前标签之后的所有兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).nextAll() 索引是2之后的所有标签
    // console.log( $('ul>li').eq(2).nextAll() );

    // 当前标签的所有兄弟标签,不管前后
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).siblings() 除索引是2的所有兄弟标签
    // console.log( $('ul>li').eq(2).siblings() );

    // 当前标签的直接父级标签
    // console.log( $('ul>li').eq(2).parent() );

    // 当前标签的所有父级标签
    // console.log( $('ul>li').eq(2).parents() );

    // 根据条件来查找jQuery,标签伪数组中符合的标签
    // $('ul').find(条件)
    // 在ul标签中,find定义的条件来查询子级标签
    // 在爹中,按照条件找儿子
    // console.log( $('ul').find('[name="li5"]') );

    // 获取伪数组标签的所有子级标签
    // console.log($('ul').children());
    
    // 效果和 .find('li')是相同的
    // console.log($('ul').find('li'));

    // 与 ul>li也是相同的
    // 只不过是为了满足不同的链式编程的需要


    // 获取当前标签在伪数组的索引
    // 也就是在所有兄弟标签中的索引下标
    // 找到所以是2的标签
    console.log($('ul>li').eq(2).index());

    // 找到一个标签,获取标签在兄弟标签中的索引
    console.log($('[name="li5"]').index());

jQuery的属性操作

<script src="./jquery.min.js"></script>
<script>    
    // 通过已经获取的标签对象,来操作标签对象的属性和属性值

    // 获取标签属性的属性值

    // 记住一句话:
    //     所有的布尔属性,都用 prop()
    //     其他属性,包括自定义属性,都用attr()




    // 方法1: $(标签对象).prop('属性');
    // 并不能获取到所有属性的属性值
    // 有些属性是拿不到的,会是undefined

    // console.log( $('div').prop('name') );
    // console.log( $('div').prop('id') );
    // console.log( $('div').prop('class') );

    console.log( $('button').prop('disabled') );


    // 方法2: $(标签对象).attr('属性');

    // console.log( $('div').attr('name') );
    // console.log( $('div').attr('id') );
    // console.log( $('div').attr('class') );

    console.log( $('button').attr('disabled') );




    // 新增属性

    // prop() 新增自定义属性,结果不会显示在标签上,但是确定可以添加上
    $('div').prop('index1' , 1);

    // 使用 prop 可以获取到这个属性
    // 获取的结果是数值类型
    console.log( $('div').prop('index1') );


    // 新增的自定义属性,可以显示在标签上,也可以通过attr()来获取到
    // 获取的结果是字符串类型
    $('div').attr('index2' , 1);
    console.log( $('div').attr('index2') );

    // 新增标签本身具有的属性
    // 有的支持,有的不支持持
    // $('div').prop('name' , 'divdiv');
    // $('div').prop('id' , 'divdiv1');
    // $('div').prop('class' , 'divdiv1-1');

    // 所有的都可以支持
    // $('div').attr('name' , 'divdiv');
    // $('div').attr('id' , 'divdiv1');
    // $('div').attr('class' , 'divdiv1-1');

    
    // 删除属性

    // prop只能删除,通过prop定义的新增自定义属性
    $('div').removeProp('name' , 'divdiv');
    $('div').removeProp('id' , 'divdiv1');
    $('div').removeProp('class' , 'divdiv1-1');

    // attr能删除所有的属性
    // $('div').removeAttr('name' , 'divdiv');
    // $('div').removeAttr('id' , 'divdiv1');
    // $('div').removeAttr('class' , 'divdiv1-1');


    // 总结
    // 布尔属性用 prop
    // 其他属性都用 attr
    // 删除属性, prop定义的用prop删,其他都用 attr删
    // 不能乱删除

</script>

jQuery 的class属性

   // 操作标签class属性的属性值
    // 只是操作属性值,css样式,该怎么执行,就按照css的优先级权重来执行

    // 1,新增class属性的属性值
    // 是在原有属性值的基础上,新增新的属性值,原有的属性值会保留

    // 新增div1属性值
    // $('div').addClass('div1');
    // 在原有div1的基础上,再新增一个div2,div1仍然保留
    // $('div').addClass('div2');
    // 在之前的属性值上在新增一个div3
    // $('div').addClass('div3');

    // 2,删除class属性的属性值
    // 只删除指定的class属性值,其他的仍然保留
    // $('div').removeClass('div2');
    

    // 3,切换如果有,就删除,如果没有就新增
    // 如果删除了div2,没有div2,就是新增div2属性值
    // $('div').toggleClass('div2');

    // 4,判断是否有这个class属性值
    // 执行结果是 布尔类型, 有--true   没有--false
    // console.log( $('div').hasClass('div2') );

    // 4,新增多个,删除多个

    // 新增多个,与给class 写多个属性值,语法形同
    $('div').addClass('div1 div2 div3');

    // 删除多个
    // 将需要删除的多个class属性,定义在字符串中,以空格间隔
    // 顺序无所谓
    // 删除div1和div2
    // $('div').removeClass('div1 div2');
    // 删除div1和div3
    // $('div').removeClass('div1 div3');

隐式迭代

    // 什么是隐式迭代
    //     jQuery会自动操作获取到的伪数组中的说有标签对象
    //     设定和获取是不一样的


    // 对ul中的所有li进行操作

    // 1,获取其中的属性
    // 获取 ul中li的name属性的属性值
    // 获取只会获取第一个标签的内容
    console.log($('ul>li').attr('name'));

    // 2,设定其中的class属性值
    // 设定属性属性值等,会给伪数组中所有的标签都设定上指定的样式,属性等
    $('ul>li').addClass('li1').attr('index' , 1);