jQuery
1.节点(标签)
- 语法
$(HTML代码) -- 返回标签对应的jQuery对象
例如：$("<p id='p1'>我是一个段落</p>")
- 创建节点
只创建不添加不会显示
<body>
<script type="text/javascript">
aNode = $("<a href='https://www.baidu.com'>百度一下</a>")
</script>
</body>
- 添加节点
- jq节点1.append(jq节点2) -- 在节点1中最后添加节点2
<body>
<script type="text/javascript">
$('#box1').append(aNode)
$('#box1').append($("<img src='img/luffy.jpg'/>"))
</script>
</body>
- jq节点1.prepend(jq节点2) -- 在节点1的最前面添加节点2
<body>
<script type="text/javascript">
$('#box1').prepend($("<h1>我是标题1</h1>"))
</script>
</body>
- 节点1.before(节点2) -- 在节点1的前面插入节点2
<body>
<script type="text/javascript">
$('#p1').before($("<h1>我是标题0</h1>"))
</script>
</body>
- 节点1.after(节点2) -- 在节点1的后面插入节点2
<body>
<script type="text/javascript">
$('#p1').after($("<h1>我是标题2</h1>"))
</script>
</body>
- 删除节点
- jq对象.remove()
<body>
<script type="text/javascript">
$('#box1 p').remove()
$('#box1 p:first').remove() //删除第一个
</script>
</body>
- jq对象.empty() -- 清空指定节点
<body>
<script type="text/javascript">
$('#box1').empty()
// $('#box1 *').remove() // '#box1 *'选中id是box1中所有的后代
</script>
</body>
2. 属性操作
- 标签内容属性：innerHTMl、innerText、value
- html方法(相当于innerHTMl)
节点.html() -- 获取节点内容
节点.html(值) -- 给节点的内容赋值
<body>
<script type="text/javascript">
console.log($('#box2 #div1').html())
$('#box2 #div1').html("<a href='https://www.baidu.com'>我是超链接</a>")
</script>
</body>
- text()方法(相当于innerText)
- val()方法(相当于value)
<body>
<script type="text/javascript">
$('#box2 input').val('小明')
</script>
</body>
- 普通属性
节点.attr(属性名) -- 获取指定节点指定属性的值
节点.attr(属性名,值) -- 修改指定节点直接属性的值
<body>
<script type="text/javascript">
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type','password')
</script>
</body>
- class属性
节点.addclass(值) -- 添加class属性
//节点.removeclass(值) -- 移除指定的class属性
<body>
<script type="text/javascript">
$('#h1').addClass('c2')
$('#h1').removeClass('c1')
</script>
</body>
3. 样式属性
- 获取样式属性的值
节点.css(样式属性名) - 修改样式属性的值
节点.css(样式属性名, 值)
节点.css(对象) -- 同时设置多种样式，就是没有提示
<body>
<script type="text/javascript">
console.log($('#h1').css('color'))
$('#h1').css('color','pink')
$('#h1').css({
'width':'300px',
'color':'blue'
})
</script>
</body>
4. 事件绑定
- 方式一
节点.on(事件名,函数) -- (和js中的addEventLinsenner功能一样)
注意:this是js对象,evt是jQuery对象
<body>
<script type="text/javascript">
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//js
// if(this.innerText == '暂停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暂停'
// }
//jQuery
if($(this).text() == '暂停'){
$(this).text('播放')
}else{
$(this).text('暂停')
}
//evt是事件对象,不是节点对象,所以获取属性的时候以对象获取属性的方式来获取
console.log(evt.clientX, evt.clientY)
})
</script>
</body>
- 方式二
节点.on(事件名,选择器,函数) -- 给指定的节点绑定指定事件，并且让节点中选择器对应的子标签对事件作出反应
错误示范：新添加的标签没有绑定上对应的事件
<body>
<script type="text/javascript">
$('box3 input').on('click', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3" />'))
</script>
</body>
正确示范：
box3 选择器
<body>
<script type="text/javascript">
$('#box3').on('click','input',function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3" />'))
</script>
</body>
Ajax
- 什么是Ajax
Ajax就是异步js，专门用来提供异步网络请求操作
$.ajax({
type:请求方式(get/post),
url:请求地址，
data:请求参数,
async:是否异步,
dataType:返回的数据类型
success:请求成功后调用的函数，函数的参数就是请求结果
})
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi?",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log('成功')
console.log(result)
}
});
</script>
</body>
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi?type=1&page=1",
async:true,
dataType:'json',
success:function(result){
console.log('成功')
console.log(result)
}
});
</script>
</body>
