jQuery实质就是对js的封装，封装的目的是为了更方便的使用js。
js的代码写在哪儿，jq代码就可以写在哪儿,但是使用jq之前必须导入jQuery
1.导入jQuery
导入本地的jquery
导入CDN服务器上的远程的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'
})
body内容
我是段落
我是a1我是段落
我是a11
文章图片
百度我是a5我是段落3
我是a2
文章图片
我是段落4
我是a4我是a3我是a31
我是a32
我是a33
文章图片
我是段落
我是div
style内容
div{
height: 600px;
background-color: blanchedalmond;
}.color{
color: red;
}
2.节点操作
1)获取节点
语法: $('选择器') - 返回的是jQuery的节点对象
选择器 - 这儿的选择器和CSS的选择器一模一样
console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('div p'))
console.log($('#p1,a'))console.log($('p+a'))//选中所有紧跟着p标签的a标签
console.log($('#p3~*'))//选中和id值是p3的标签后面同级的所有标签
console.log($('#p3~a'))//选中和id值是p3的标签后面同级的所有的a标签
console.log($('p:first'))//选中当前页面中的第一个p标签
console.log($('div p:first'))//选中所有div标签中的第一个p标签
console.log($('p:last'))//选中当前页面中的最后一个p标签
console.log($('div *:first-child'))//选中div标签中的第一个子标签
2)创建节点
$('html标签语法')
imageNode = $("
")//创建一个img标签
3)添加节点
$('body').append(imageNode)//在body的最后添加一个子标签
$('body').prepend($(''))//在body的最前面插入一个子标签
$('#img1').before($(''))//在id是img1的标签的前面添加一个按钮标签
$('#img1').after($(''))//在id是img1的标签的后面添加一个按钮标签
4)删除节点
$('#img1').remove()//标签.remove()- 删除指定标签
$('div').empty()//标签.empty()- 清除指定标签中的内容
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')
【Day08-jQ基础】3.特殊属性
1)innerHTML（标签内容属性） - html()
console.log($('#div').html())
$('#div').html('我是新的div')
2)innerText (标签文本内容) - text()
console.log($('#div').text())
$('#div').text('我是新的div2')
3)value (单标签内容) - val()
console.log($('#user').val())
$('#user').val('李四')
4)class
标签.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)
})
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
