JQuery_01

  • 一、认识JQuery

  • 二、对象

  • 三、获取元素

  • 四、隐式迭代

  • 五、筛选选择器

  • 六、事件绑定

  • 七、筛选方法(父级,后代,兄弟)

  • 八、排他思想

  • 九、链式编程(一行代码解决问题)


一、认识JQuery

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

  2. 优点:

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

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

$ ( function () {
} )


二、对象

  1. JQ 中的顶级对象

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

consolelog($ === jQuery) // true
  1. 原生DOM对象

    jQuery对象

  • 原生DOM对象就是 通过webAPIs 获取的元素对象

  • 其实jQuery元素对象就是封装了原生DOM对象得到的

  • 使用 $(参数) 获取的元素 是伪数组的形式

  • jQuery的操作方法只有jQuery元素对象可以使用,原生DOM对象不可以

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

  1. 原生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);
  1. 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.icode9.com/content-4-769701.html

(0)

相关推荐

  • JavaScript中的DOM与BOM

    DOM 概念 文档对象模型 (Document Object Model,简称DOM) 将 web 页面与到脚本或编程语言连接起来.通常是指 JavaScript,但将 HTML.SVG 或 XML ...

  • 11.jQuery工具方法$.Callbacks()的简单实现

    jQuery工具方法$.Callbacks()的简单实现: (function () { //创建一个jQuery构造函数 function jQuery(selector) { return new ...

  • jQuery从入门到放弃

    概念 jQuery 是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作.事件处理.动画和 Ajax 操作更加简 ...

  • Jquery消息滚动

    又是一次作业练习,jquery消息滚动,效果图如下: 源码下载及效果预览:https://www.jq22.com/jquery-info22971 代码实现起来很简单,所以看起来效果也是很不如人意, ...

  • jQuery 简明教程 快速上手

    jQuery 简明教程 快速上手