jQuery入门
jQuery入门
2.1 属性操作
2.2 文档处理
2.3克隆
2.4常用事件
2.6绑定事件和解绑事件
2.7hover事件
2.8input事件
2.9阻止后续事件执行
2.10事件冒泡和阻止事件冒泡
2.11页面载入
2.12事件委托
2.13each和data
属性操作
#属性操作就是给标签增加删除等操作
#JavaScript中是如何操作的?
div.setAttribute('k','v');
div.getAttribute('k');
div.removeAttribute('k');
#jQuery中如何操作？
var a = $('#d1')
a.attr('k','v');//a对象中的匹配元素设置一个属性值
a.attr('k');//返回a中对应元素的属性值
a.attr({k1:v1,k2:v2....})为所有匹配元素设置多个属性值
a.removeAttr()//从a中删除一个元素
#用于checkbox和radio中
a.prop()//获取属性
removeProp()//移除属性
#我们在处理check和radio的时候尽量使用特定的prop(),不要使用attr('checked','checked')
#对于标签的自定义属性，使用attr方法获取，而不要使用prop方法
总结一下：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选择都是用prop
文档处理也叫做节点操作
#js中如何创建一个新标签
var a=document.createElement('a')//创建一个空的a标签
a.innertext='text'
a.innerHTML='<p>aaa</p>'#可以添加标签属性
var d=document.getElement('div')
d.appenChild(a);//将a标签添加到div的末尾子孙标签中
#jquery中创建一个标签
var a = $('<a>')//创建一个空的a标签
a.text()//添加文本
a.html()//添加可以设置标签属性的文本
a.attr('k','v')//添加属性
$('d1').append(a)//将a标签添加到div#d1的内部末尾
克隆
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.5.1.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
常用事件
click(function(){...}) #点击
hover(function(){...}) #鼠标移动到标签上
blur(function(){...}) #失去焦点
focus(function(){...}) #获取焦点
change(function(){...}) #value有变化时,在失去焦点后触发change事件
keyup(function(){...})
input监控
实时监听input输入值变化示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
绑定事件和解绑事件
#绑定事件：
1.
$('#btn').click(function () {
alert(123);
})
2.#这种绑定方式功能更加强大，它支持事件委托
$('#btn').on('click', function () {
alert(123);
})
#移除事件：
移除事件
1. .off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
● events： 事件
● selector: 选择器（可选的）
● function: 事件处理函数
hover事件
<script>
$("#p1").hover(function () {
console.log(123);
}, function () {
console.log(345);
})
</script>
# 第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作
input事件
<script>
$('#d1').on('input', function () {
console.log(this.value);
// 只需要在这里向后端发起一个请求携带这此时的值后端给我返回一个结果，我放到页面上***即时反馈
// ajax朝后端发起请求----------->django中学
})
</script>
阻止后续事件执行
<script>
$("#btn").click(function (e) {
$('.s1').text('趁年轻，学技能');
// 阻止后续事件的执行1
// return false;
// 阻止后续事件的执行2
e.preventDefault();#阻止默认事件的执行
})
</script>
事件冒泡和阻止事件冒泡
事件冒泡：
当触发span标签事件时，它的父级标签也会自动触发，这个叫做冒泡事件
阻止事件冒泡：
方式1：
$('span').click(function(){
console.log('span');
return false;
})
方式2：
$('span').click(function(event){
console.log('span');
e.stopPropagation();
})
页面载入
#等待页面加载完毕之后再执行的代码
#js中如何做？
window.onload=function(){}
#jQuery中
方法1：
$('docmument').ready(function(){
//在这里写你的JS代码...
})
方法2：
$(function(){
//写js代码
})
方法3：
#把js代码放在body的最下面，最后加载就可以了
事件委托
$('.btn').click(function{
console.log('chufale')//这种绑定方式不能影响动态创建的标签。
})
#利用事件委托来解决
$('body').on('click','.btn',function(){//把body中触发click的事件全都委托给.btn选中的对象执行function的方法
console.log('chufale')
})//这种绑定方式可以作用给动态创建的标签
补充
1.each类似循环
用法1：$('div').each(function(value,index){
console.log(value,index)
})
用法2：BBS项目中需要使用
var arr = [1,2,3,4,5]
$.each(arr,function(index,value){
console.log(index,value)
})
2.data
data所添加的属性肉眼无法看见
添加
$('div').data('usename','kevin')
删除
$('div').first().removeData('username')
浙公网安备 33010602011771号