一、jQuery基本操作
jQuery实质就是对js的封装，封装的目的是为了更方便的使用js
js的代码写在哪里，jQuery代码就可以写在哪里，但是使用之前必须导入jQuery
两种导入方法：
<!-- 导入本地的jQuery -->
<!-- <script src="jquery.min.js"></script> -->
<!-- 导入CDN服务器上的远程的jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js?tdsourcetag=s_pcqq_aiomsg"></script>
<!-- 导入成功后，就可以使用jQuery语法了 -->
$ 代表jQuery对象
1.onload (js)和 ready(jQuery)
onload - 网页加载成功对应的事件(包括标签加载完成和网络请求完成)
window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello'
}
// ready:$(document).ready(函数) 网页中标签加载完成后会自动调用对应的函数
$(document).ready(function(){
pNode2 = document.getElementById('p1')
pNode2.innerText = '你好 jQuery'
})
// $(匿名函数) - 网页中标签加载完成后会自动调用对应的匿名函数
// 相当于上面的写法
$(function(){
pNode3 = document.getElementById('p1')
pNode3.innerText = '你好 jQuery!!!!!!!!!!!'
})
2.节点操作
1)获取节点(DOM)
语法:$('选择器') - 返回的是jQuery的节点对象
选择器 - 这儿的选择器和CSS选择器一样的
// $('#p1')
// $('.p2')
console.log($('p'))
console.log($('#p1'))
console.log($('.p2'))
console.log($('div p'))
console.log($('#box>p'))
// 选择器1+选择器2 - 选中紧跟着选择器1的选择器2对应的标签
console.log($('p+a'))
console.log($('#box :first-child'))
2)创建节点
$('html标签语法')
// 创建一个p标签
pNode = $('<p>我是jQuery创建的节点</p>')
3)添加节点
// 在body最后面添加子标签
$('body').append(pNode)
// 在body最前面添加子标签
$('body').prepend($('<input type="text">'))
$('p').before("<b>Hello</b>")
- 删除节点
$('b').remove() //标签.remove() - 删除指定标签
$('div').empty()//标签.empty() - 清除指定标签中的内容
二、jQuery属性操作
1.获取普通属性
标签.attr(属性名) - 这儿的属性名不包含innerHTML,innerText,value
2.修改/增加普通属性
标签.attr(属性名, 值)
// 1.获取普通属性
console.log($('a').attr('href'))
// 2.修改/增加普通属性
$('#a1').attr('href', 'https://www.baidu.com')
// 3.innerHTML(标签内容属性)
console.log($('#box').html())
// $('#box').html('我是添加的')
// 4.innerText(标签文本内容)
console.log($('#box').text())
$('#box').text('我是添加的！！！！！！！！！')
// 5.value(单标签内容) 该方法大多用于 input 元素。
console.log($('#user').val())
$('#user').val('修改')
// 6.class
// 标签.addClass(类名) - 给标签添加class值
$('p').addClass('active')
// 标签.remove(类名) - 移除指定的class的值
$('p').removeClass('active')
// 7.样式属性
// 标签.css(样式属性名) - 获取样式属性的值
// 标签.css(演示属性名, 值) - 设置样式
// 标签.css({属性名:属性值, 属性名:属性值...}) - 同时设置多个属性样式
$('p').css('color', 'yellow')
$('p').css('font-size', '30px')
3.绑定事件
// 标签.on(事件名, 函数) - 和js中的addEventListener一样
$("#btn").on('click', function(event){
console.log(this, event)
})
