Jquery基础知识

$函数

• 1、$(selector,context)：获取元素

  $('li').css('color', 'blue');
    $('li', '.first').css('background-color', 'yellow') //$('li', '.first')==$('.first li')
    $('.first li').css('background-color', 'green');

  
• 2、$(js对象)：jquery包装器，js对象是原生的js对象，将原生的js对象转为jquery对象；

  $(document.body).css('background', 'skyblue');

  将jquery对象还原成原生的js对象
  • 1…spread扩展

     console.log([...$('li')]);
    [...$('li')].forEach(item => {
        console.log(item);
    });

    
  • 2、get(n)将jquery对象中的某一个对象还原成原生的js对象

    //console.log($('li').get(2));
    $('li').get(2).style.backgroundColor = 'yellow'

    
• 3、$(html文本)：生成dom元素；

    document.querySelector('.first li:nth-of-type(2)').insertAdjacentHTML('afterend', '<li>这是生成的</li>');
    $('<li>这是生成的1</li>').appendTo($('.first li:last-of-type'));

  
• 4、$(callback回调函数):传一个回调当参数，当页面加载完成会自动调用它；

     $(() => {
            $('<li>这是生成的1</li>').appendTo($('.first li:last-of-type'));
        })

  

总结： $()的参数的四种类型

• 1选择器
• 2元素js对象（包装器功能）
• 3html字符串：创建dom元素
• 4回调函数：在页面加载完dom树创建成功后自动调用；

  attr()获取/设置元素属性 attr(name)获取|attr(name,value)设置

  const form = $('form')
    console.log(form);
    console.log(form.attr('action'));
    form.attr('action', 'admin/user.php');
    console.log(form.attr('action'));

  
  attr 第二个参数使用回调

  form.attr('action', () => {
        let method = form.attr('method').toUpperCase();
        return method === 'GET' ? 'query.php?userid=2' : 'register.php';
    })
    console.log(form.attr('action'));

  

  css()设置元素的行内样式 style属性

  css(name):获取
  css(name,value)设置
  css(name,callback);

• 原生使用style只能获取到style中的行内样式,css样式表的样式是获取不到的，必须使用计算样式才可以

  console.log(document.querySelector('form').style.width);
    console.log(window.getComputedStyle(document.querySelector('form'), null).getPropertyValue('width'));

  
  jquery获取

  console.log(form.css('width'));

  
  css(obj)

    form.css({
            'background': '#ccc',
            'border-bottom': '2px solid red'
        })
        //第二个参数支持回调函数
    form.css('background-color', () => {
            const colors = ['red', 'blue', 'yellow', 'skyblue', 'pink'];
            let i = Math.floor(Math.random() * colors.length);
            return colors[i]
        })

  

  val()：元素的值，表单控件的value属性

  //原生
    console.log(document.forms.login.password.value);
    //jquery
    console.log($('input:password').val());
    $('input:password').val('456789');
    console.log($('input:password').val());
    console.log($('input:radio:checked').val());
    $('input[name=username]').val(() => 'admin')

  

  text() innerText / textContent

  console.log(document.querySelector('.title').innerText);
    //jquery
    console.log($('.title').text());

  

  html() innerHTML

  console.log(document.querySelector('.title').innerHTML);
    //jquery
    console.log($('.title').html());