云里雾里的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
jQuery实质就是对js的封装，封装的目的是为了更方便的使用js。
js的代码写在哪儿，jQuery代码就写在哪儿，但是使用jQuery之前必须导入jQuery
-->
<!--1.导入jQuery-->
<!--导入本地的jQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--导入CSDN服务器上的远程的jQuery-->
<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<!--导入jQuery后，就可以在后面使用jQuery语法-->
<script type="text/javascript">
//$ -> 代表jQuery对象
//==============1.onload(js)和ready(jQuery)=======================
//onload - 网页加载完成对应的事件(包括标签加载完成和网络请求完成)
window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello jQuery!'
}
//$(document).ready(函数) - 网页中标签加载完成后会自动调用对应的函数
//$(匿名函数) - 网页中标签加载完成后会自动调用对应的函数
$(document).ready(function(){
// pNode2 = document.getElementById('p2')
// pNode2.innerText = '你好！jQuery'
})
//相当于上面的写法
$(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好！jQuery'
})
</script>
<style type="text/css">
div{
height: 100px;
background-color: cornflowerblue;
margin-bottom: 2px;
}
.color{
color: red;
}
</style>
</head>
<body>
<p id="p1">我是段落</p>
<a href="">我是a1</a>
<p id="p2" class="c1">我是段落</p>
<img id="img1" src="img/thumb-1.jpg"/>
<a href="" class="c1">百度</a>
<div class="">
<p>div中的段落1</p>
<a href="" id="a1">aaaaa</a>
</div>
<div>
<p>div中的段落2</p>
</div>
<script type="text/javascript">
//==========2.节点操作=============
//1)获取节点(DOM操作)
//语法：$('选择器') - 返回的是jQuery的节点对象
//选择器 - 这个选择器和CSS的选择器一模一样
console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('#p1,a'))
console.log($('#p1').text())
//选择器1 + 选择器2 - 选中紧跟着选择器1的选择器2对应的标签
console.log($('p+a')) //选中所有紧跟着p标签的a标签
//选择器1~* - 选中选择器1后面所有和选择器1同级的标签
//选择器1~选择器2 - 选中选择器1后面所有和选择器1同级的选择器2对应的标签
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标签语法')
imgNode = $("<img src='img/thumb-2.jpg'/>") //创建一个img标签
//3)添加节点
$('body').append(imgNode) //在body的最后添加一个子标签
$('body').prepend($("<input placeholder='请输入'>")) //在body的最前面添加一个子标签
$('#img1').before($("<button>before</button>")) //在指定的标签前面添加一个标签
$('#img1').after($("<button>after</button>")) //在指定的标签后面添加一个标签
//4)删除节点
$('#img1').remove() //标签.remove() - 删除指定标签
$('div').empty() //标签.empty() - 清除指定标签中的内容
//5)克隆和替换(查文档)
</script>
<img id="img2" src="img/thumb-3.jpg" title="服装"/>
<div id="div">
<p>我是段落</p>
我是div
</div>
<input type="" name="user" id="user" value="张三" />
<button id="btn1">按钮</button>
<script type="text/javascript">
//===============3.属性操作==============
//1.获取属性
//标签.attr(属性名) - 这儿的属性名不包括innerHTML,innerText,value
console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))
//2.修改/增加普通属性
//标签.attr(属性名，值)
$('#img2').attr('src','img/thumb-1.jpg')
//3.特殊属性
//1)innerHTML (标签内容属性) - html()
console.log($('#div').html())
$('#div').html('我是新的div')
//2)innerText (标签文本内容) - text()
console.log($('#div').text())
$('#div').text('我是新的div')
//3)value (单标签内容) - val()
console.log($('#user').val())
$('#user').val('李四')
//4)class
//标签.addClass(类名) - 给标签添加class值
$('p,a').addClass('color')
//标签.removeClass(类名) - 移除指定的class值
$('p').removeClass('color')
//4.样式属性
//标签.css(样式属性名) - 获取样式属性的值
//标签.css(样式属性名，值) - 设置样式
//标签.css({属性名：值，属性名：值...}) - 同时设置多种样式属性
// $('p').css('font-size', '20px')
// $('p').css('color', 'royalblue')
$('p').css({
'color':'red',
'font-size':'20px'
})
//=================4.事件绑定=============
//标签.on(事件名，函数) - 和js中的addEventListener是一样的
$('#btn1').on('click', function(evt){
alert('点击按钮')
console.log(this,evt.offsetX,evt.offsetY)
})
</script>
</body>
</html>
网友评论