JQuery_01

印度阿三17 2020-11-30

展开全文

一、认识JQuery
二、对象
三、获取元素
四、隐式迭代
五、筛选选择器
六、事件绑定
七、筛选方法（父级，后代，兄弟）
八、排他思想
九、链式编程（一行代码解决问题）

一、认识JQuery

本质上其实就是封装了一系列操作原生 dom 元素的功能库
优点：

(1) 轻量级，核心文件几十kb，不影响页面加载速度
(2) 跨浏览器兼容
(3) 链式编程和隐式迭代，大大提升了开发效率
(4) 对事件、样式、动画的支持，大大简化了 DOM 操作
(5) 丰富的插件生态圈，如树形菜单、轮播图、日期控件等
(6) 免费、开源

入口函数
为了解决script标签可以在任意位置使用，我们需要添加入口函数

$ ( function () {
} )

二、对象

JQ 中的顶级对象

$ 符号是 jQuery 的别称，是同一个函数

consolelog($ === jQuery) // true

原生DOM对象
和
jQuery对象

原生DOM对象就是通过webAPIs 获取的元素对象
其实jQuery元素对象就是封装了原生DOM对象得到的
使用 $(参数) 获取的元素是伪数组的形式
jQuery的操作方法只有jQuery元素对象可以使用，原生DOM对象不可以

3.原生DOM对象和jQuery对象转换

原生DOM元素对象 ===> jQuery元素对象
在原生DOM对象后面加上 [0] 或者 .get(0)

let div = $('div')[0] // 在原生DOM对象后面加上 [0]  或者  .get(0) 都可以将 jq 元素装欢成原生 DOM 元素
    let div2 = $('div').get(0)
    console.log(div, div2);

jQuery元素对象 ===> 原生DOM元素对象
$(dom对象)

  let div3 = $(document.querySelector('div'))      
 console.log(div3);

三、获取元素

jquery 获取元素：$(‘选择器’)

    $(function () {  // 1. 类名
      console.log($('.box'));

      // 2. id 名
      console.log($('#foo'));

      // 3. 标签名
      console.log($('h2'));

      // 4. 后代选择器
      console.log($('ul li span'));

      // 5. 子代选择器
      console.log($('ul>li'));

      // 6. 属性选择器
      console.log($('[class=box]'));
    })

四、隐式迭代

意思就是jQuery可以同时操作一组元素

<body>
<div>元素1</div>
    <div>元素2</div>
    <div>元素3</div>
    <div>元素4</div>
</body>

<script>
$(function() {
   $('div').css('background', 'pink')
})
</script>

五、筛选选择器

注意是放在 $(‘selector’) 里进行使用

        // 1. 获取第一个子元素
        console.log($('li:first'));

        // 2. 获取最后一个子元素
        console.log($('li:last'));

        // 3. 获取第 index 个子元素 (jq 当中元素的索引 index 从 0 开始)
        console.log($('li:eq(2)'));

        // 4. 获取      索引号      为奇数 odd 的元素 (因为索引号是从 0 开始的,所以选出来的元素是第偶数个)
        console.log($('li:odd'));
        $('li:odd').css('background', '#abcdef')
        $('li:odd').css('width', '200px')

        // 5. 获取      索引号      为偶数 even 的元素 (因为索引号是从 0 开始的,所以选出来的元素是第奇数个)
        console.log($('li:even'));
        $('li:even').css('background', 'pink')
        $('li:even').css('width', '300px')
        $('li:even').css('listStyle', 'none')

六、事件绑定

jq对象.事件名称(function () { })

$(function() {$('div').click(function() {console.log('hello'); // jq 事件处理函数中 this 指向 原生DOM元素
    })
})

七、筛选方法（父级，后代，兄弟）

jq对象.方法名() 进行调用

        // !!jq 中所有的方法都要加 ()
        // 1. 获取父元素
        console.log($('ul').parent());

        // 1.1 获取指定的祖先元素
        console.log($('li').parents());

        // 2. 获取所有的子元素
        console.log($('ul').children());

        // 3. 查找获取所有的后代元素（包括子和孙）
        console.log($('.box').find('.foo'));

        // 4. 获取所有的兄弟元素（不包括自己）
        console.log($('.bar').siblings());

        // 总结：以上方法的小括号中都可以使用 jq 的选择器；

        // 1. 获取上一个元素
        console.log($('.bar').prev());

        // 1.1 获取前面所有的元素
        console.log($('.bar').prevAll());

        // 2. 获取下一个元素
        console.log($('.bar').next());

        // 2.1 获取后面所有的元素
        console.log($('.bar').nextAll());

        // 3. 判断某个元素是否包含某个特定的类名
        console.log($('.bar').hasClass('foo'));

        // 4. (重要)获取第 n 个元素 （元素索引 n 从 0 开始）
        console.log($('li').eq(3));

八、排他思想

通过隐式迭代的方法给一组元素设置点击事件

        $(function() {$('button').click(function() {$(this).css('background', 'pink').siblings().css('background', '')
            })
        })

九、链式编程（一行代码解决问题）

原理：每次调用完 jq 方法后，会返回当前调用的 jq 对象

<body>
    <div class="father">
        <div class="son">
            Hello
        </div>
        <div class="foo">
            world
        </div>
    </div>
    <script>
        // 链式编程：一行代码解决问题
        // 改变 son 的背景颜色 改变 father 的背景 
        $(function() {$('.son').css('background', 'pink').parent().css('background', 'red').children('.foo').css('background', 'orange')
            })
            // 链式编程的原因：每次调用完 jq 方法后，会返回当前调用的 jq 对象
    </script>
</body>

来源：https://www./content-4-769701.html