• day-55前端


      

    jQuery

      jQuery是对js进行的二次封装的工具包

      jQuery和JavaScript的顶级都是Windows,也就是window.*/window.document.*,而Windows都可以省略

    jQuery选择器 

      $('css3选择器语法') 就是jq选择器,获得的是jq对象, jq对象可以调用jq库的所有功能,

       jq对象可以理解为存放了js对象的数组 (存放了几个js对象不需要关心)


       jq对象转换为js对象 :

         jq对象[js对象所在索引]

      好处:

        可以使用js的语法
      js对象转换为jq对象 :

         $(js对象)

       好处:

        可以使用jq的语法

    jQuery操作页面的三个步骤

    获取标签、绑定事件、操作标签

    1. $('h1').click(function (ev) {
                    
       console.log(ev);
       console.log(ev.clientX);
       console.log(ev.clientY);
     })

     这里的ev是 jq的事件对象,但对js事件做了完全兼容,也就是包含了js事件

    2.$('h1').on('click', function (ev) {

      console.log(ev);

     })

    兼容性更多

     

    3.$('p').click(function () {

       console.log(this);            /这里的this获得的是js本身对象
      console.log($(this).text());

      });

    给多个标签绑定相同事件,但在jq事件中的this获得的对象还是js对象,

      如果想要使用jq功能,需要将this转换为jq对象 $(this),也就是上文说的对象转换

    文本的操作

    获取文本

    $div.text()    获取文本内容
    $div.html()   获取标签内容
    $inp.val()     获取表单内容

     设置文本

    $div.text(‘文本内容’)    设置文本内容
    $div.html(‘文本内容’)   设置标签内容
    $inp.val(‘文本内容’)     设置表单内容

    样式的操作

    获取样式

      1.$div.css('css中的样式属性名');  

      2.$('h1').click(function () {
        let $this = $(this);
        let color = $this .css('color');
        let fs = $this.css('font-size');
        let ta = $this.css('text-align');
        console.log(color, parseInt(fs), ta);

        });

    设置样式

      $('h1').click(function () {
        let $this = $(this);
        let color = $this .css('color');
        let fs = $this.css('font-size');
        let ta = $this.css('text-align');
        console.log(color, parseInt(fs), ta);

        1. $this.css('background-color', 'orange');

        

        2.$this.css({
          'background-color': 'pink',
          'border-radius': '10px',
          'width': '200px',
        });

        3.$this.css('height', function (index, oldValue) {   //function函数就是‘height’要设置的参数

          console.log(oldValue);
          let w = $(this).width();            // $(this) 可以拿到调用者对象
          return w / 2;                //返回值就是要设置的值(可以与自身其他属性,或是页面其他标签,或是自定义逻辑有关系);
         })

        });

    类名的操作

    优点:

      可以一次性获取提前设置好的一套样式

    增加类名:             $div.addClass('类名')
    删除类名:             $div.removeClass('类名')
    切换类名( 无类名添加,反之去除):$div.toggleClass('类名')

    属性的操作

    获取属性值:$div.attr('属性名')
    设置属性值:$div.attr('属性名', '属性值或函数')    //像这种('属性名', '属性值'),后面的属性值都可以写成function函数
    删除属性值:$div.attr('属性名', '')

    案例:

    $('h1').click(function () {

      $('img').attr('src', function () {
        return 'https://ss2.bai8c6.jpg'
    });

    jq的链式操作

    $('h1').css('color', 'orange').css('background', 'red').click(function () {
      console.log(this)
    }).text();

    $('h1').css('color', 'orange')加()调用函数,返回的是自身(jq对象),就可以继续在后面点,

      如果返回了内容,就不可以继续点了(比如.text())

    jq操作文档

    快速定位到某一个jq对象

    1、如何在jq集合中快速拿到某一个jq对象(外部):

        jq对象.eq(从0开始的索引) / $('.d:eq(0)')

    案例:

      $('.d').eq(1).click(function () {
         alert(123)
       })

    2、在jq集合中都具有相同事件,如何在事件中如何区别每一个jq对象(内部)

      $(this) 或者 index

    案例:

      $('.d').click(function () {
        let index = $(this).index();    /.index()是 标签所在层级的索引,不是在jq对象数组中的索引
        $('.d').eq(index)
    });

    通过自身快速定位到 "亲戚"

    上兄弟(们)     prev(All)
    下兄弟(们)     next(All)
    兄弟们           siblings
    孩子们           children
    父亲(们)         parents

    案例:

      let $d2 = $('.d2');
        console.log($d2);
      let next = $d2.next();
        console.log(next);
      let nexts = $d2.nextAll();
        console.log(nexts);
      let prev = $d2.prev();
        console.log(prev);
      let siblings = $d2.siblings();
        console.log(siblings);
      let children = $d2.children();
        console.log(children);
      let parent = $d2.parent();
        console.log(parent);

    动态生成页面结构

     let $table = $('<table></table>');


     $table.css({
       border: '1px'
     }); 


     $('body').append($table);     // 加入到body标签里面的最后
     $('body').prepend($table);      // 加入到body标签里面的最前
     $('p').before($table);       // 加入到p标签之前
     $('p').after($table);        // 加入到p标签之后

  • 相关阅读:
    C# FTP上传文件时出现"应 PASV 命令的请求,服务器返回了一个与 FTP 连接地址不同的地址。"的错误
    ESP32 学习笔记
    ESP32 学习笔记
    C# 实现窗口无边框,可拖动效果
    C# 获取IP地址
    C# 实现程序开机自启动
    C# 设置程序最小化到任务栏右下角,鼠标左键单击还原,右键提示关闭程序
    C# 生成机器码
    C# 隐藏窗口标题栏、隐藏任务栏图标
    C# 测量程序运行时间
  • 原文地址:https://www.cnblogs.com/klw1/p/11141399.html
Copyright © 2020-2023  润新知