初步了解jQuery

什么是jQuery
jQuery 是一个类库(方法库)，里面有各种封装好的DOM操作。
如何使用jQuery
直接引入jQuery文件，然后就可以使用jQuery中的操作

<script src="./jquery.js"></script>
//或者
<script src="./jquery.min.js"></script>

用jQuery操作元素属性

• attr() attr(要读取的属性名): 传递一个参数的时候是读取
  attr(属性名, 属性值): 传递两个参数的时候是设置
• removeAttr() 用来移除属性
• prop() prop(要读取的属性名): 传递一个参数的时候是读取
  prop(属性名, 属性值): 传递两个参数的时候是设置
• removeProp() 用来移除属性的
• data() data(要读取的属性名): 传递一个参数的时候是读取
  data(属性名, 属性值): 传递两个参数的时候是设置
• removeData() 用来删除数据的

//attr  设置的自定义属性存储在标签身上
//给 div 设置一个 id 属性, 值为 box
$('div').attr('id', 'box')
//给 div 设置一个 hello 属性, 值为 world
$('div').attr('hello', 'world')
//给 div 设置一个 number 属性, 值为 666
$('div').attr('number', 666)
//获取 div 的 number 属性
console.log($('div').attr('number'))
//删除 number 属性
$('button').click(function () {
     $('div').removeAttr('number')
 })
 
//prop 设置的自定义属性存储在元素对象里面
//给 div 设置一个 id 属性, 值是 box2
$('div').prop('id', 'box2')
//给 div 设置一个 hello 属性, 值是 world
$('div').prop('hello', 'world')
//给 div 设置一个 number属性, 值是 888
$('div').prop('number', 888)
//获取刚才设置的 number 属性
console.log($('div').prop('number'))
//删除设置的id属性
$('button').click(() => {
     $('div').removeProp('id')
 })

//data 设置的自定义属性存储在元素对象里面单独开辟的一个对象
//给 div 设置一个自定义属性叫做 id, 值是 box3
$('div').data('id', 'box3')
$('div').data('hello', 'world')
$('div').data('number', 123456)
//获取
console.log($('div').data('id'))
//删除
$('button').click(() => {
     $('div').removeData('number')
     console.log($('div').data('number'))
 })

样式操作

• css(‘样式名称’) 获取元素的样式值，不管是行内样式还是非行内样式都能获取
• css（‘样式名称’，‘样式的值’） 设置元素的样式值, 元素集合能获取多少个元素就设置多少个元素
• css（‘对象’） 给元素集合里面的所有元素, 批量设置样式

$('div')//能获取多个元素
//这个获取样式只能获取元素集合里面第一个元素的样式
console.log($('div').css('width'))
//设置元素的样式
$('div').css('width', 300)
//批量设置样式
//设置的时候, 所有的单位都可以不写, 默认添加 px 为单位
$('div')
  .css({
    width: 200,
    height: '300px',
    opacity: 0.6,
    float: 'left'
 })

jQuery还算比较常用，希望这些能对还是跟我一样的小白有些帮助，努力！