jQuery 第一天 认识、基础概念和实例方法

1.jQuery介绍

​ 就是js库，JS写的一堆方法，专注于DOM操作的类库

2.jQuery使用

​ (1)下载

​ (2)引入 引入JS文件

​ (3)使用

3.实例

​ jQuery对象别名：$

​ 每次调用这个jQuery或$都会得到一个新的实例

4.选择器

​ jQuery获取元素用css选择器

​ $('css选择器')

​ jQuery对象是一个伪数组，遍历出来的是DOM对象，必须要转成jQuery对象才能用

5.jQuery对象和DOM对象转换

​ dom对象用document.querySelector获取元素，要转换为jQuery对象用(DOM) 例：$(btn)

​ jQuery对象是一个伪数组，要想转换为DOM对象用下标或get(索引值)来改

6.事件

快捷方法

​ $('css选择器').事件类型(function () { })

基础方法

​ on/off、bind/unbind、one

​ 添加事件：$('css选择器').on(事件类型，后代元素，处理函数)

​ 解绑事件：$('css选择器').off('事件类型')

​ bind/unbind、one一样，但是one是一次性事件 推荐用on

快捷方法和基础方法on的优势

​ on绑定事件可以同时绑定多个事件

​ 例：

$('input').on( {
        click : function () {
            console.log('a');
        },
        mouseenter : function () {
            console.log('b');
        },
        mouseleave : function () {
            console.log('c');
        }
   } );
// 如果多个事件类型的处理程序相同，那么可以简写
$('input').on('click mouseenter mouseleave', function () {
      console.log('abc');
});
​
$('input').off('click');

​ 快捷方法只能一个一个的添加事件

​ 例：

// 快捷事件
$('input').click(function () {
      console.log(1);
});
​
$('input').mouseenter(function () {
      console.log(2);
});
​
$('input').mouseleave(function () {
      console.log(3);
});

自定义事件

​ 是自己定义的事件类型名称，要搭配trigger使用，trigger触发自定义事件

​ 例：

$('input').on('Wode', function () {
      $(this).css('background', 'orange');
});
​
// trigger触发自定义事件   会自动执行，一运行打开就是完成的css样式
// 如果一个元素有要和它触发一样的事件就不用在加事件了，直接调用$('input).trigger('Wode')即可
$('input').trigger('Wode');

7.样式

行内样式

​ 用css方法添加的样式

​ 例：

$('input').click(function () {
// 用对象的方式写
      $('div').css({
        background : 'orange',
        width : 100,
        height : '200px',
        'font-size' : '44px',
      });
});
// 如果只有一个参数时，是获取元素对应的值
$('div').css('height');

类名操作

​ 通过类的方法来操作，添加、删除、切换、检测是否包含

$('input').on('click', function () {
   // 添加类
   $('div').addClass('c2');
   // 删除类
   $('div').removeClass('c1');
   // 切换类
   $('div').toggleClass('c2');
   // 检测是否包含那个类
   $('div').hasClass('c1');
});

8.链式编程

​ 简便的语法结构，把它们写到一起，从左到右执行

​ 链式编程的原理是方法在执行完之后会返回调用者

$('.box')
   .css('width', 240) // 改变 style 属性
   .addClass('active') // 添加类名
   .click(function () { // 添加单击事件
       $(this).off('click');
       console.log('单击事件被触发...');
});

9.隐式迭代

​ 自动的帮你遍历了，原生DOM对象document.querySelectorAll获取多个，还需遍历添加样式方法等，而jQuery对象不需for循环遍历，隐式迭代就会帮助

10.查找关系

父子关系

​ 查找后代元素：$('css选择器').find('选择的元素').css('xxx','xxx')

​ 查找儿子元素：$('css选择器').children().css('xxx','xxx')

​ 查找父元素：$('css选择器').parent().css('xxx','xxx')

​ 查找上级元素：$('css选择器').parents().css('xxx','xxx') parents找的是上级元素，没有document

​ 不加参数就是查找所有的，加参数就是查找指定的元素

兄弟关系

​ 查找兄弟元素：$('css选择器').siblings().css('xxx','xxx')

​ 查找上一个兄弟：$('css选择器').prev().css('xxx','xxx')

​ 查找下一个兄弟元素：$('css选择器').next().css('xxx','xxx')

11.筛选

​ 筛选第一个元素：$('css选择器').first().css('xxx','xxx')

​ 筛选最后一个元素：$('css选择器').last().css('xxx','xxx')

​ 筛选指定的元素：$('css选择器').eq(索引值).css('xxx','xxx')

12.属性

​ 修改固有属性、自定义属性

<img src="./images/a.jpg" alt="" data-my="刘佳慧">
  <script src="./JS/jquery-3.6.0.min.js"></script>
  <script>
    // prop修改固有属性
    // console.log( $('img').prop('src') );
    // $('img').prop('src', './images/c.jpg');
​
    // attr修改自定义属性
    // console.log( $('img').attr('data-my') );
    // $('img').attr('data-my', '刘佳');
​
    // data方法 如果是data-的命名的自定义属性，用data方法
    // console.log( $('img').data('my') );
    // 注意不能设置，不会显示会存在在镜像中   data方法只能获取，也可以设置但是在镜像里，看不到
    // $('img').data('my','刘佳');
  </script>

13.文本

​ $('div').text('<h4>刘佳慧</h4>'); // 相当于innerText

​ $('div').html('<h4>刘佳慧</h4>'); // 相当于innerHtml

14.其他知识点

​ val()方法获取表单的value内容

​ 获取一个元素的索引值，index() 因为他返回的是一个数字，后面不能.了

​ jQuery中show()方法等价于css('display','block')，hide()方法等价于css('display','none')