前端08 /jQuery标签操作、事件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前端08 /jQuery标签操作、事件
- 1.标签内文本操作
  - 1.1 html标签元素中的所有内容
  - 1.2 text 标签元素的文本内容
- 2.文档标签操作
  - 2.1值操作
  - 2.2插入标签
  - 2.3 删除标签 remove、detach和empty
  - 2.4 (替换)修改标签 replaceWith和replaceAll
  - 2.5 克隆标签 clone
- 3.属性操作
  - 3.1 attr() 设置属性值、者获取属性值
  - 3.2 removeAttr() 移除属性
  - 3.3 prop()
- 4.class类属性
  - 4.1 addClass添加类名
  - 4.2 removeClass移除类名
  - 4.3 toggleClass类的切换
- 5.val 表单控件value属性
- 6.css样式
- 7.盒子样式属性
  - 7.1 内容 : 宽度(width)和高度(height)
  - 7.2 内容+padding : 宽度(innerWidth)和高度(innerHeight)
  - 7.3 内容+padding+border : 宽度(outerWidth)和高度(outerHeight)
- 8.滚动条距离属性
- 9.jQuery的事件操作
  - 9.1 绑定事件
  - 9.2 常见事件
  - 9.3 解绑事件
  - 9.4 补充一次性事件
  - 9.5事件冒泡
  - 9.6 事件委托（事件代理）

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(){...}) mouseover/mouseout mouseenter/mouseleave mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象复制代码

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

或通过event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event){ event.stopPropagation(); });

示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: red; height: 200px; width: 200px; } #d2{ background-color: green; height: 200px; width: 200px; } .dd1{ background-color: yellow; height: 40px; width: 40px; } .dd2{ background-color: pink; height: 40px; width: 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>      <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还是触发事件的那个子标签，这个记住昂

作业1思路

绑定点击事件 1 获取input标签中的值val 2 val().trim().length 3 =0 方式1:提前在input标签后面放一个span标签,加一个类值{color:red},找到span并添加文本内容, .text() .html() 4 如果不等于0,清空span中的内容

作业3

1 模态对话框结合点击事件完成弹出和隐藏 2 点击取消,关闭对话框 3 点击确认,关闭对话框,获取用户输入的内容 4 拼接一个tr标签,将数据放到里面的td标签里面,然后将tr标签放到tbody标签内部的后面5 开除,点击这一行的那个开除按钮,就将本行tr标签删除 remove方法