$函数

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());

Jquery基础知识

$函数

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

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

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

text() innerText / textContent

html() innerHTML

更多相关文章

随机推荐