前端09 /jQuery标签操作、事件、补充
目录
1.标签内文本操作
1.1 html标签元素中的所有内容
//获取值：获取选中标签元素中所有的内容
$('#box').html();
//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
1.2 text 标签元素的文本内容
//获取值：获取选中标签元素中的文本内容
$('#box').text();
//设置值：设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意：text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
2.文档标签操作
2.1值操作
取值:
文本输入框:$('#username').val();
1.input,type=radio单选框: $('[type="radio"]:checked').val();,首先找到被选中的标签,再进行取值
2.input,type=checkbox多选框: 通过val方法不能直接获取多选的值,只能拿到一个,想拿到多个项的值,需要循环取值
var d = $('[type="checkbox"]:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
3.单选下拉框select: -- $('#s1').val();
4.多选下拉框select: -- $('#s2').val(); -- ['1','2']
设置值
1.文本输入框: -- $('#username').val('xxx');
2.input,type=radio单选框: -- $(':radio').val(['1']) 找到所有的radio,然后通过val设置值,达到一个选中的效果.
3.给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
此处有坑:$(':radio').val('1');这样设置值,不带中括号的,意思是将所有的input,type=radio的标签的value属性的值设置为1.
4.input,type=checkbox多选框: -- $(':checkbox').val(['1','2']);
5.单选下拉框select: -- $('#s1').val(['3']);
6.多选下拉框select: -- $('#s2').val(['1','2']);
统一一个方法:
选择框都用中括号设置值.
2.2插入标签
append和appendTo
//追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
父元素.append(子元素)
//追加到某元素，子元素添加到父元素
子元素.appendTo(父元素)
//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
//appendTo
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
PS:如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。
prepend和prependTo
// 前置添加， 添加到父元素的第一个位置
父元素.prepend(子元素)；
// 前置添加， 添加到父元素的第一个位置
子元素.prependTo(父元素)；
// prepand
$('ul').prepend('<li>我是第一个</li>')
// prependTo
$('<a href="#">路飞</a>').prependTo('ul')
after和insertAfter
// 在匹配的元素之后插入内容
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
before和insertBefore
// 在匹配的元素之前插入内容
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；
//示例
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
2.3 删除标签 remove、detach和empty
//删除节点后，事件也会删除（简言之，删除了整个标签）
$(selector).remove();
// 删除节点后，事件会保留
$(selector).detach();
// 清空选中元素中的所有后代节点
$(selector).empty();
// remove
$('ul').remove();
// detach
var $btn = $('button').detach()
$('ul').append($btn) //此时按钮能追加到ul中
//empty
$('ul').empty() //清空掉ul中的子元素，保留ul
2.4 (替换)修改标签 replaceWith和replaceAll
// selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
$(selector).replaceWith(content);
// selector被替换：将所有的匹配的元素替换成p标签。
$('<p>哈哈哈</p>')replaceAll(selector);
// replaceWith
$('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签
$('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素
// replaceAll
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
2.5 克隆标签 clone
// 克隆匹配的DOM元素
$(选择器).clone();
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script src="jquery.js"></script>
<script>
$('.btn').click(function () {
// var btnEle = $(this).clone(); // 不带参数的克隆不能克隆绑定的事件
var btnEle = $(this).clone(true); // 参数写个true,就能复制事件
$(this).after(btnEle);
})
</script>
</html>
3.属性操作
3.1 attr() 设置属性值、者获取属性值
//获取值：attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')
//设置值
$('div').attr('class','box') //设置一个值
$('div').attr({name:'hahaha',class:'happy'}) //设置多个值
3.2 removeAttr() 移除属性
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');
3.3 prop()
// 查看属性
$(selector).prop(property)
// 设置属性
$(selector).prop(property,value)
// 设置多个属性
$(selector).prop({property:value, property:value,...})
$('input').attr('checked')
"checked"
$('input').prop('checked')
true
$('input').prop('cheched',false) //设置取消选中
prop和attr方法的区别:
总结一下：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
checked示例:
attr():
查看值,checked 选中--'checked' 没选中--undefined
$('#nv').attr({'checked':'checked'});
设置值,attr无法完成取消选中
$('#nv').attr({'checked':'undefined'});
$('#nv').attr({'checked':undefined});
prop():
查看值,checked 选中--true 没选中--false
$(':checkbox').prop('checked');
设置值:
$(':checkbox').prop('checked',true);
$(':checkbox').prop('checked',false);
4.class类属性
4.1 addClass添加类名
// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个
4.2 removeClass移除类名
// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')；//移除box类
$('div').removeClass();//移除全部的类
4.3 toggleClass类的切换
// 如果存在（不存在）就删除（添加）一个类。
$('div').toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
5.val 表单控件value属性
// 获取值：用于表单控件中获取值，比如input textarea select等等
$(selector).val()
// 设置值：
$('input').val('设置了表单控件中的值')；
6.css样式
// css(直接修改css的属性来修改样式)
$("div").css('color'); //获取
$("p").css("color", "red"); //设置
$("p").css({"color":"red","background-color":"yello"}); // 设置多个
7.盒子样式属性
7.1 内容 : 宽度(width)和高度(height)
// 宽度
.width() //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
.width( value ) //设置宽度
//高度
.height() //获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
.height( value ) //设置高度
7.2 内容+padding : 宽度(innerWidth)和高度(innerHeight)
// 内部宽
.innerWidth() // 获取
.innerWidth(value);//设置
// 内部高
.innerHeight() // 获取
.innerHeight(value); //设置
7.3 内容+padding+border : 宽度(outerWidth)和高度(outerHeight)
// 外部宽
.outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
.outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
.outerWidth(value) //设置多个，调整的是“内容”的宽
//外部高
.outerHeight() //第一个匹配元素：获取内容+padding+border的高
.outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
.outerHeight( value ) //设置多个，调整的是“内容”的高
8.滚动条距离属性
// 水平方向
.scrollLeft() //获取
.scrollLeft( value )//设置
// 垂直方向
.scrollTop() //获取
.scrollTop( value ) //设置
9.jQuery的事件操作
9.1 绑定事件
绑定事件的两种方式:
// 绑定事件的方式1
// $("#d1").click(function () {
// $(this).css('background-color','green');
// })
// 方式2
$('#d1').on('click',function () {
$(this).css('background-color','green');
})
示例：当每个p标签被点击的时候，弹出其文本
$("p").on("click", function(){
alert( $(this).text() );
});
你可以在事件处理之前传递一些附加的数据。
function handler(event) {
//event.data 可以获取bind()方法的第二个参数的数据
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, handler)
9.2 常见事件
click(function(){...}) //点击
hover(function(){...}) //悬浮
blur(function(){...}) //光标离开
focus(function(){...}) //光标聚焦
change(function(){...}) //内容发生变化，input，select等
keyup(function(){...}) //按键抬起
keydown(function(){...}) //按键按下
mouseover/mouseout //光标离开
mouseenter/mouseleave //光标进入
$(window).scroll(function(){...}) //滚轮滑动触发
$(window).scrollTop() //滚轮向下滑动的距离
$(window).scrollLeft() //滚轮向右滑动的距离
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
复制代码
滚轮滑动示例
<script>
$(window).scroll(function () {
if ($(window).scrollTop() >= 200){
$('#back_top').removeClass('hide');
}else {
$('#back_top').addClass('hide');
}
})
</script>
通过返回false来取消默认的行为并阻止事件起泡。
$("select").on("change", function() { return false; })
或通过event.preventDefault() 方法阻止事件起泡
$("select").on("change", function(event){
event.stopPropagation();
});
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 200px;
200px;
}
#d2{
background-color: green;
height: 200px;
200px;
}
.dd1{
background-color: yellow;
height: 40px;
40px;
}
.dd2{
background-color: pink;
height: 40px;
40px;
}
</style>
</head>
<body>
<div id="d1">
<div class="dd1"></div>
</div>
<div id="d2">
<div class="dd2"></div>
</div>
用户名:<input type="text" id="username">
<br>
<!--<select name="" id="s1">-->
<!-- <option value="1">上海</option>-->
<!-- <option value="2">深圳</option>-->
<!-- <option value="3">贵州</option>-->
<!--</select>-->
<input type="text" id="xxx">
</body>
<script src="jquery.js"></script>
<script>
// 绑定事件的方式1
// $("#d1").click(function () {
// $(this).css('background-color','green');
// })
// 方式2
// $('#d1').on('click',function () {
// $(this).css('background-color','green');
// });
//
// // 获取光标触发的事件
// $('#username').focus(function () {
// $(this).css('background-color','green');
// });
// // 失去光标触发的事件
// $('#username').blur(function () {
// $(this).css('background-color','white');
// });
// // 域内容发生变化触发的事件,一般用于select标签
// $('#s1').change(function () {
// // $('#d1').css('background-color','black');
// console.log('xxxxx')
//
// });
// $('#xxx').change(function () {
// console.log($(this).val());
// })
输入内容实时触发的事件,input事件只能on绑定
// $('#xxx').on('input',function () {
// console.log($(this).val());
// });
//
// //绑定多个事件 事件名称空格间隔
// $('#xxx').on('input blur',function () {
// console.log($(this).val());
// })
// 鼠标进入触发的事件
// $('#d1').mouseenter(function () {
// $(this).css('background-color','green');
// });
// // 鼠标离开触发的事件
// $('#d1').mouseout(function () {
// $(this).css('background-color','red');
// });
// hover事件 鼠标进进出出的事件
// $('#d1').hover(
// // 鼠标进入
// function () {
// $(this).css('background-color','green');
// },
// // 鼠标离开
// function () {
// $(this).css('background-color','red');
// }
// );
$('#d1').mouseenter(function () {
console.log('xxx');
});
$('#d2').mouseover(function () {
console.log('ooo');
});
// 键盘按下
// $(window).keydown(function (e) {
// console.log(e.keyCode);
//
// });
// 键盘抬起
$(window).keyup(function (e) {
console.log(e.keyCode);
});
</script>
</html>
9.3 解绑事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了
1.events： 事件
2.selector: 选择器（可选的）
3.function: 事件处理函数
9.4 补充 一次性事件
one(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个*一次性*的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
//只有第一次点击的时候才会触发，再次点击不会触发了
alert( $(this).text() );
});
9.5事件冒泡
// 事件冒泡,子标签和父标签(祖先标签)绑定了相同的事件,比如点击事件,那么当你点击子标签时,会一层一层的往上触发父级或者祖父级等等的事件
$('.c1').click(function () {
alert('父级标签!!!');
});
$('.c2').click(function (e) {
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; //方式1
// e.stopPropagation() // 方式2
})
9.6 事件委托（事件代理）
原理：
利用冒泡的原理，把事件加到父级上，触发执行效果。
<div id="d1">
<button class="btn">屠龙宝刀,点击就送!</button>.
</div>
// 事件委托
$('#d1').on('click','.btn',function () {
// $(this)是你点击的儿子标签
var a= $(this).clone();
$('#d1').append(a);
});
//中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
9.7 阻止后续事件执行
1. return false; // 常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法
2. e.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action=""> #action里面如果没写url，默认是将内容提交到当前页面的url处
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.stopPropagation();
});
</script>
</body>
</html>
9.8 input事件
实时监听input输入值变化示例：input值变化事件：看百度搜索的效果：这叫做input事件，看代码：只要input框里面的值发生变化就触发某个事件，注意input事件不能直接绑定，必须用on绑定才行，$('#d1').input(function{})是不对的，$('#d1').on('input',function(){})才行
<!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 () { //可以支持IE9以下的版本
console.log($(this).val());
})
</script>
</body>
</html>
10.变量 字符串的拼接
var name = $('.name').val();
var hobby = $('.hobby').val();
方式一：
var nh= '<tr><td><input type="checkbox"></td><td>'+name +'</td><td>' +hobby +'</td><td><button class="btn4">开除</button></td></tr>';
方式二（tab上面的点·）：
var nh=`
<tr>
<td><input type="checkbox"></td>
<td>${name}</td>
<td>${hobby}</td>
<td><button class="btn4">开除</button></td>
</tr>
`;
11.页面载入
window.onload:
原生js的window.onload事件:// onload 等待页面所有内容加载完成之后自动触发的事件
window.onload = function(){
$('.c1').click(function () {
$(this).addClass('c2');
});
};
jquery页面载入:
$(function () {
$('.c1').click(function () {
$(this).addClass('c2');
});
})
非简写方式
$(document).ready(function(){
// 在这里写你的JS代码...
})
与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
12.jquery的each
循环数组:
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})
循环自定义对象也是可以的：
var d1 = {'name':'chao','age':18}
$.each(d1,function(k,v){console.log(k,v)})
return false；终止循环
在遍历过程中可以使用 return false提前结束each循环。 类似于break
而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思 类似与continue
var namelist = ['a','b','c']
s.each(namelist, function(i,v){
if (i===3){
return false;
}
console.log(i,v);
})
s.each(namelist, function(i,v){
if (i===3){
return;
}
console.log(i,v);
})
13. .data()
1.任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
2.在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
3..data(key, value): 设置值
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
4..data(key): 取值，没有的话返回undefined
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
$("div").data("k");//返回第一个div标签中保存的"k"的值
5. .removeData(key): 删除数据
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据