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

前端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(父元素)

//append
var 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();

// 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标签。
$('
哈哈哈
')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/mouseout
mouseenter/mouseleave
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，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标签中的值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方法