目录

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

1.标签内文本操作

1.1 html标签元素中的所有内容

//获取值：获取选中标签元素中所有的内容$('#box').html();  //设置值：设置该元素的所有内容 会替换掉 标签中原来的内容$('#box').html('百度一下');

1.2 text 标签元素的文本内容

//获取值：获取选中标签元素中的文本内容$('#box').text();//设置值：设置该所有的文本内容$('#box').text('百度一下');

注意：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

2.2插入标签

append和appendTo

//追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素父元素.append(子元素)//追加到某元素，子元素添加到父元素子元素.appendTo(父元素)

//appendvar oli = document.createElement('li');oli.innerHTML = '哈哈哈';$('ul').append('
1233
');$('ul').append(oli);$('ul').append($('#app'));//appendTo$('
天王盖地虎
').appendTo($('ul')).addClass('active')

PS:如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。

prepend和prependTo

// 前置添加， 添加到父元素的第一个位置父元素.prepend(子元素)；// 前置添加， 添加到父元素的第一个位置子元素.prependTo(父元素)；

// prepand$('ul').prepend('
我是第一个
')// prependTo$('路飞').prependTo('ul')

after和insertAfter

// 在匹配的元素之后插入内容 兄弟元素.after(要插入的兄弟元素)；要插入的兄弟元素.inserAfter(兄弟元素)；$('ul').after('
我是一个h3标题
')$('
我是一个h2标题
').insertAfter('ul')

before和insertBefore

// 在匹配的元素之前插入内容兄弟元素.before(要插入的兄弟元素)；要插入的兄弟元素.inserBefore(兄弟元素)； //示例$('ul').before('
我是一个h3标题
')$('
我是一个h2标题
').insertBefore('ul')

2.3 删除标签 remove、detach和empty

//删除节点后，事件也会删除（简言之，删除了整个标签）$(selector).remove(); // 删除节点后，事件会保留$(selector).detach(); // 清空选中元素中的所有后代节点$(selector).empty();

// remove$('ul').remove();// detachvar $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标签。$('
哈哈哈
')replaceAll(selector);

// replaceWith $('h5').replaceWith('hello world') //将所有的h5标题替换为a标签$('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素// replaceAll$('
    
按钮').replaceAll('h4')

2.5 克隆标签 clone

// 克隆匹配的DOM元素$(选择器).clone();

$('button').click(function() { // 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)  $(this).clone(true).insertAfter(this);})

示例:    
            屠龙宝刀,点击就送!

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

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

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

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

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

示例:                    
                                
    
        
     
    
    
    
    
        
     
    
    
    用户名:    
    
        
        
        
        
                        

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 事件委托（事件代理）

原理：    利用冒泡的原理，把事件加到父级上，触发执行效果。        
    
        
     屠龙宝刀,点击就送!.            
    
    // 事件委托    $('#d1').on('click','.btn',function () {          // $(this)是你点击的儿子标签        var a= $(this).clone();        $('#d1').append(a);    });//中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂

作业1思路

绑定点击事件1 获取input标签中的值val2 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方法