jQuery基础之选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入jQuery-->
<!--导入本地jQuery文件-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--企业开发-->
<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
</head>
<body>
<script type="text/javascript">
//1.什么是jQuery
/*
jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
如果想要使用jQuery必须先导入jQuery的js文件
js可以将任何内容转换js对象，例如:document、节点、事件对象
jQuery提供的方法只支持jQuery对象
在jQuery中$代表jQuery, $() -> 创建jQuery对象的语法
document -> js对象； $(document) -> jQuery对象
*/
//2.ready方法 - 等待网页中内容加载完成
/*
和onload功能一样
$(document).ready(function(){
页面加载完成后才会执行的代码
})
简写:
$(function(){
页面加载完成后才会执行的代码
})
*/
// $(document).ready(function(){
//
// pNode = document.getElementById('p1')
// console.log(pNode)
// })
$(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
</script>
<p id="p1">我是段落1</p>
<div id="div1">
<p class="cp1">我是段落2</p>
<div id="div2">
<a href="">我是超链接</a>
<p>我是段落3</p>
<p>我是段落4</p>
<span id="">
<p>我是段落5</p>
</span>
<p>我是段落6</p>
</div>
</div>
<p class="cp1">我是段落2</p>
<script type="text/javascript">
//3.DOM操作
//1)获取节点
/*
语法: $(选择器)
说明: 选择器 - 和CSS中的选择器一样
a.普通选择器: 和css一样的
*/
var pNode = $('#p1')
console.log(pNode)
pNode.text('新的段落1')
pNodes = $('.cp1')
console.log(pNodes)
pNodes.text('新的段落2')
for(x=0;x<pNodes.length;x++){
//遍历取出来的是js对象
const p = pNodes[x]
// $(p).text(x)
}
pNode = $('div p')
console.log('===:',pNode)
/*
b.其他特殊情况
选择器1>选择器2 - 选中选择器中的选择器2对应的直系子标签
选择器1+选择器2 - 选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器~选择器2 - 选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器:first - 第一个选择器
选择器:last - 最后一个选择器
选择器>*:first-child - 选中选择器中第一个子标签
选择器 *:first-child - 选中选择器中第一个子标签
*/
pNode = $('div>p')
console.log('===:',pNode)
pNode = $('#p1 + div')
console.log('===:',pNode)
pNode = $('#p1~p')
console.log('===:',pNode)
pNode = $('p:first')
console.log('===:',pNode)
pNode = $('#div2>p:first')
console.log('===:',pNode)
pNode = $('#div2>p:last')
console.log('===:',pNode)
var xNode = $('#div2>*:first-child')
console.log('===:',xNode)
</script>
</body>
</html>
jQuery节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.c1{
color: red;
}
.c2{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--=========1.节点操作===========-->
<div id="box1" style="background-color: yellowgreen;">
<p id="p1">我是段落</p>
</div>
<!--========2.属性操作==========-->
<div id="box2">
<h1 class="c1" id="h1">我是标题0</h1>
<div id="div1">
<h1 class="c1">我是标题1</h1>
</div>
<div id="div2"></div>
<input class="c1" type="text" name="" id="" value="" />
</div>
<!--========3.事件绑定=========-->
<button>暂停</button>
<div id="box3">
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
</div>
<script type="text/javascript">
//1.创建节点(标签)
/*
1)语法:
$(HTML代码) - 返回标签对应的jQuery对象
例如: $("<p id='p1'>我是一个段落</p>")
*/
aNode = $("<a href='https://www.baidu.com'>百度一下</a>")
//2.添加节点
//1)jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)节点1.prepend(节点2) - 在节点1的最前面插入节点2
$('#box1').prepend($('<h1>我是标题1</h1>'))
//3)节点1.before(节点2) - 在节点1的前面插入节点2
$('#p1').before($('<p>我是段落0</p>'))
//4)节点1.after(节点2) - 在节点1的后面插入节点2
$('#p1').after($('<p>我是段落2</p>'))
//3.删除标签
//1)jq对象.remove() - 删除指定节点
$('#box1 p').remove()
//2)jq对象.empty() - 清空指定节点
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 选中id是box1中所有的后代
//2.=============属性操作===============
//1)标签内容属性: innerHTML、innerText、value
//a.html方法(相当于innerHTML)
//节点.html() - 获取节点内容
//节点.html(值) - 给节点内容赋值
//b.text()方法(相当于innerText)
console.log($('#box2 #div1').html())
$('#box2 #div1').html('<a href="https://www.baidu.com">我是超链接</a>')
//c.val()方法(相当于value)
$('#box2 input').val('小明')
//2)普通属性
//节点.attr(属性名) - 获取指定节点指定属性的值
//节点.attr(属性名,值) - 修改指定节点直接属性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
//3)class属性
//节点.addClass(值) - 添加class属性值
$('#h1').addClass('c2')
//节点.removeClass(值) - 移除指定的class值
$('#h1').removeClass('c1')
//3.==========样式属性=============
//1)获取样式属性的值
//节点.css(样式属性名)
console.log($('#h1').css('color'))
//2)修改样式属性的值
//节点.css(样式属性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//节点.css(对象) - 同时设置多种样式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
//4.============事件绑定============
//方法一：直接绑定
//节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
//注意: this是js对象，evt是jQuery对象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js对象
//====js代码
// if(this.innerText == '暂停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暂停'
// }
//====jQuery代码
if($(this).text() == '暂停'){
$(this).text('播放')
}else{
$(this).text('暂停')
}
// 2)evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取
console.log(evt.clientX, evt.clientY)
})
//方式二:
//节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件，
// 并且让节点中选择器对应的子标签对事件做出反应
//错误示范:新添加的标签没有绑定上对应的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
*/
//#box3 选择器
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
</script>
</body>
</html>
ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//1.什么是Ajax
//Ajax就是异步js，专门用来提供异步网络请求操作
/*
$.ajax({
type:请求方式(get/post),
url:请求地址,
data:请求参数,
async:是否异步,
dataType:返回的数据类型
success:请求成功后调用的函数,函数的参数就是请求结果
})
*/
/*
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});*/
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/getShoppingCartList",
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});
</script>
</body>
</html>
