jQuery菜鸟入门

一、什么是jQuery

        一个js库，兼容性好，扩张性强的链式调用语言。链式调用的基础是基于所有的方法返回的都是一个jquery对象

二、入门

        核心对象 jquery 也可以省略为 $ (别名)

jquery外网地址

jquery中文网

引入js文件，或者是引用地址（我自己下载js文件）

三、基本语法

            选择器

        eq获取对应下标元素

        odd获取奇数下标元素

        even获取偶数下标元素

        last获取最后一个元素

        first获取第一个元素 

$('li:eq(0)')
$('li:odd')  
$('li:even') 
$('li:last') 
$('li:first')

        筛选器

        名称与选择器相同，带两个参数

        

//筛选器用于筛选获取的元素的 所有的筛选器都可以传参 除了eq其他传入的参数都是选择器
//它会找到对应的匹配的选择器的元素
console.log('筛选器');
console.log($('li').eq(0)); //获取下标为0的
console.log($('li').first()); //获取第一个
console.log($('li').last()); //获取最后一个
console.log($('li').eq(0).next()); //获取下标为0的下一个
console.log($('li').eq(1).prev()); //获取下标为1的上一个
console.log($('li').eq(2).nextAll()); //获取下标为2的下面的所有同辈元素
console.log($('li').eq(2).prevAll()); //获取下标为2的上面的所有同辈元素
console.log($('li:eq(0)').children()); //获取下标为0的li的所有的子元素
console.log($('li:eq(0)').parent()); //获取下标为0的li的父元素
console.log($('li:eq(0)').siblings()); //获取所有的兄弟元素
console.log($('li').find('a')); //在li里面查找对应的a标签

        属性操作

        prop只能修改自带的属性        删除removeProp

        attr只能修改自带的属性           删除removeAttr

 <div id="box" name="box"> </div>

<script>
$('div').prop('id','box')
        console.log($('div').prop('id','box'));
        $('div').attr('name','box')
        console.log($('div').attr('name','box'));

</script>

        

                class属性的增删改查

            addClass添加class         removeClass删除     hasClass查询（返回Boolean）

$('div').addClass('world')
        $('div').removeClass('hello')
        $('div').hasClass('hello')

                属性显示的方法  

$('div').html('<b>hello</b>')
        $('div').text('<b>hello</b>')
        $('input').val('你好')
        console.log($('input').val);

      样式操作  

        一个参数是获取，两个是设置

 $('div').css('backgroundColor','red')

        

        JQuery的dom操作

        

//创建元素
let $div = $('<div>我是添加的div</div>')
console.log($div);
//添加元素
// 父子添加
// $('#box').add($div)
//原生实现 appendChild 追加到最后
$('#box').append($div) //添加子元素 在box里面添加div
$div.appendTo( $('#box')) //添加子元素 将div添加到box里面
$('#box').prepend($('<a>我是a</a>')) //插入之前  在box里面的开始位置插入a
$('<a>我是a</a>').prependTo($('#box')) //将a标签插入到box里面的开始位置
// 兄弟添加
$('<b>我是你后面的兄弟<b>').insertAfter($('#box')) //将b标签插入到box的后面
$('<b>我是你前面的兄弟<b>') .insertBefore($('#box')) //将b标签插入到box的前面
$('#box').after($('<h3>我是after添加元素</h3>')) //在box后面添加h3
$('#box').before($('<h3>我是before添加元素</h3>')) //在box前面添加h3
//删除
// remove 删除所有包括自己 传入对应的选择器 表示删除这个匹配的
// $('#box').remove()
// 清空
// $('#box').empty()
//克隆 clone 是否克隆所有的事件 是否深度
console.log($('#box').clone(true,true)[0]);
//替换 replace
// $('<b>我是b标签</b>').replaceAll($('#box')) //将前面的内容替换后面的内容
$('#box').replaceWith($('<b>我是b标签</b>')) //用后面的内容替换前面的内容

        元素的位置及尺寸获取

        尺寸

console.log($('div').innerHeight()); //包含padding 不包含border
console.log($('div').innerWidth());
console.log($('div').outerHeight()); //包含padding 包含border
console.log($('div').outerWidth());
console.log($('div').width()); //直接读width和height 样式读取
console.log($('div').height());

        位置

//获取位置 offset position 返回是一个对象 left 和 top
console.log($('span').offset()); //基于页面的
console.log($('span').position()); //基于父元素 offsetParent

        

        事件处理

       实例： 隔行变色

        

<style>
        li{
            list-style: none;
            width: 30px;
            height: 30px;
        }
    </style>

<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="./jquery.min.js"></script>

    <script>
        let oddBox = $('li:odd');
        console.log(oddBox);
        for (var v of oddBox) {
            v.style.backgroundColor = 'red'
            console.log(v);

        }
        let evenBox = $('li:even');
        for (var v of evenBox) {
            v.style.backgroundColor ='blue'
        }
    </script>

        

        toggle切换

        

//传时间 回调函数 同时变化宽高和透明度
$('div').hide(2000,()=>{
    $('div').show(2000)
})
$('div').toggle(2000) //如果显示就隐藏 hide 隐藏就显示show