jQuery实质就是对js的封装，封装的目的是为了更方便的使用js。
js的代码写在哪儿，jq代码就可以写在哪儿,但是使用jq之前必须导入jQuery

导入jQuery

1. 导入本地的jquery

<script type="text/javascript" src="js/jquery.min.js"></script>

2. 导入CDN服务器上的远程的jQuery

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3. 导入jQuery后，就可以在后面使用jQuery语法

jQuery的使用

$ -> 代表jQuery对象

1. onload(js)和ready(jQuery)

• onload - 网页加载完成对应的事件(包括标签加载完成和网络请求完成)

window.onload = function(){
                pNode = document.getElementById('p1')
                pNode.innerText = 'hello jQuery！'
            }

ready

• $(document).ready(函数) - 网页中标签加载完成后会自动调用对应的函数

$(document).ready(function(){
                pNode2 = document.getElementById('p2')
                pNode2.innerText = '你好 jQuery'
            })

• $(匿名函数) - 网页中标签加载完成后会自动调用对应的匿名函数

//相当于上面的写法
$(function(){
      pNode2 = document.getElementById('p2')
      pNode2.innerText = '你好 jQuery'
})

2. 节点操作
   1)获取节点

• 语法: $('选择器') - 返回的是jQuery的节点对象
• 选择器 - 这儿的选择器和CSS的选择器一模一样

console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('div p'))
console.log($('#p1,a'))

• 选中所有紧跟着p标签的a标签

  console.log($('p+a'))  
  

• 选中和id值是p3的标签后面同级的所有标签

  console.log($('#p3~*'))
  

• 选中和id值是p3的标签后面同级的所有的a标签

  console.log($('#p3~a'))
  

• 选中当前页面中的第一个p标签

  console.log($('p:first'))
  

• 选中所有div标签中的第一个p标签

   console.log($('div p:first'))
  

• 选中当前页面中的最后一个p标签

   console.log($('p:last'))
  

• 选中div标签中的第一个子标签

  console.log($('div *:first-child'))
  

2)创建节点
$('html标签语法')

• 创建一个img标签

  imageNode = $("<img src='img/thumb-1.jpg'/ title='图标'>")
  

3)添加节点

• 在body的最后添加一个子标签

   $('body').append(imageNode)
  

• 在body的最前面插入一个子标签

    $('body').prepend($('<input placeholder="请输入账号"/>')) 
  

• 在id是img1的标签的前面添加一个按钮标签

   $('#img1').before($('<button>before</button>'))
  

• 在id是img1的标签的后面添加一个按钮标签

  $('#img1').after($('<button>after</button>'))
  

4)删除节点

• 标签.remove() - 删除指定标签

  $('#img1').remove()
  

• 标签.empty() - 清除指定标签中的内容

  $('div').empty()
  

5)克隆和替换(查文档)

3. 属性操作
   1).获取普通属性

• 标签.attr(属性名) - 这儿的属性名不包括innerHTML,innerText，value

console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))

2).修改/增加普通属性

• 标签.attr(属性名,值)

$('#img2').attr('src', 'img/thumb-3.jpg')

3).特殊属性

• innerHTML（标签内容属性） - html()

console.log($('#div').html())
$('#div').html('我是新的div')

• innerText (标签文本内容) - text()

console.log($('#div').text())
$('#div').text('我是新的div2')  

• value (单标签内容) - val()

console.log($('#user').val())
$('#user').val('李四')  

• 标签.addClass(类名) - 给标签添加class值

$('p').addClass('color')

• 标签.removeClass(类名) - 移除指定的class值

$('p').removeClass('color')  

4)样式属性

• 标签.css(样式属性名) - 获取样式属性值
• 标签.css(样式属性名, 值) - 设置样式
• 标签.css({属性名:属性值, 属性名:属性值 ...}) - 同时设置多种样式属性

        //$('p').css('color', 'slateblue')
        //$('p').css('font-size', '20px')
        $('p').css({
            'color':'red',
            'font-size':'30px'
        })  

4. 事件绑定==================

• 标签.on(事件名, 函数) - 和js中的addEventListener是一样的

$('#btn1').on('click', function(evt){
    alert('点击按钮')
    console.log(this, evt.offsetX, evt.offsetY)
})