jQuery特性

Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注

jQuery特性

Created by Marydon on 2017-07-17 11:50

CreateTime--2017年7月17日11:45:27
Author:Marydon

jQuery特性

1.jQuery取值

　　使用jQuery进行页面取值时，获取到的值的类型有两种：string、undefined。

　　说明：如果页面上不存在该元素，不会报错，返回的是：undefined

2.jQuery赋值

　　使用jQuery进行页面赋值时，如果值为undefined，则该行页面赋值方法虽然运行了，但是没有执行任何操作。

3.jQuery执行事件

　　 使用jQuery给页面上不存在的元素执行事件，不会报错，该行代码不会执行任何操作

举例：

　　HTML部分

<input id="test" type="text"/>
<div id="test2" style="border:1px solid red;height: 20px;"></div>

　　JAVASCRIPT部分

window.onload = function () {
    // 例1.给id="test"的文本框赋值未定义
    $('#test').val(undefined);
    // 例2.给id="test2"的div添加内容：不存在的页面元素test3的值
    $('#test2').html($('#test3').val());
    // 例3.给页面上不存在的元素执行点击事件
    $('#bcDiv table:eq(0)').click();
}

　　说明： 

　　　　这三项的好处在于：

　　　　a.如果不存在不会报错，而使用js就会报错；

　　　　b.对页面进行赋值时，不会将undefined赋值到页面上，而是不执行任何操作（不会修改原文），而js会将undefined当作字符串输出到页面上。

UpdateTime--2017年8月24日17:55:48

4.操作CSS样式

<a href="www.baidu.com" id="ceshi">去除下划线</a> 

　　4.1 操作单个CSS样式

$('#ceshi').css('text-decoration','none');　　

　　4.2 操作多个CSS样式

$('#ceshi').css({'text-decoration':'none','color':'#f57e42'}); 

注意：

　　a.jQuery操作一个CSS样式，格式：css('样式名','样式值')；

　　样式名和样式值之间使用逗号隔开。

　　b.jQuery操作多个（>=2）CSS样式，格式：css({'样式名':'样式值','样式名':'样式值',...})；　　 

　　样式名和样式值之间使用冒号隔开，多个样式之间使用逗号隔开，最外面使用大括号包住，即里面是一个标准的JSON对象。

　　c.对于CSS样式的名称，中间不带有-的可以不加单引号；用-隔开的样式名，必须使用单引号括住。

UpdateTime--2017年8月25日08:11:07

5.绑定事件

　　仍以上面的a标签为例

　　5.1 绑定单个事件

　　添加鼠标悬浮事件实现方式汇总：

　　方式一：推荐使用

$(function(){
    $('#ceshi').mouseover(function(){
        $(this).css({'text-decoration':'none',color:'#FFF'});
    });
}); 

　　方式二：使用on事件

$(function(){
    $('#ceshi').on('mouseover',function(){
        $(this).css({'text-decoration':'none',color:'#FFF'});
    });
});

　　方式三：使用bind事件

$(function(){
    $('#ceshi').bind('mouseover',function(){
        $(this).css({'text-decoration':'none',color:'#FFF'});
    });
}); 

　　5.2 绑定多个事件

　　添加鼠标悬浮事件和鼠标移除事件实现方式汇总：

　　方式一：推荐使用

$(function(){
    $('#ceshi').mouseover(function(){
                    $(this).css({'text-decoration':'none',color:'#FFF'});
                }).mouseout(function(){
                    $(this).css('color','#000');//color必须加单引号，否则报错
                });
});

　　方式二：使用on事件

$(function(){
    $('#ceshi').on({'mouseover':function(){
                        $(this).css({'text-decoration':'none',color:'#FFF'});
                    },
                    'mouseout':function(){
                        $(this).css('color','#000');
                    }
                    }); 
}); 

　　方式三：使用bind事件 

$(function(){
    $('#ceshi').bind({'mouseover':function(){
                        $(this).css({'text-decoration':'none',color:'#FFF'});
                    },
                    'mouseout':function(){
                        $(this).css('color','#000');
                    }
                    }); 
}); 

注意：

　　a.以on事件为例，jQuery其实就是javascript的on去掉而已；

　　b.方式一：单个事件直接添加".事件(function(){})"，多个事件在其后继续添加".事件(function(){})"；

　　c.方式二：单个事件格式：on('事件名',function(){})，多个事件格式：on({'事件名':function(){},'事件名':function(){},...})；

　 　最外面使用{}包起来，事件名使用单引号括起来，事件名与匿名函数之间使用冒号，多个事件之间使用逗号隔开，即也是一个类似标准的JSON对象。　

6.执行多个jQuery代码

var newTable = $('#' + tableName).clone().attr('id', '').show().appendTo("#" + divName);

解说： 获取id=tableName的标签并对其进行克隆，设置克隆后的table兑现的id属性值为空，并让其显示出来，拼接到id=divName的div标签的最底部

UpdateTime--2017年9月4日17:12:40

7.获取子节点、子孙节点

// 获取的是子节点
var aa = $('#file_upload-queue').children('div').length;
// 获取的是子孙节点
aa = $('#file_upload-queue div').length;

8.通过class样式选取页面元素

　　8.1 class样式只作用在一个元素上

　　说明：获取到的有且只有一个jquery元素

　　测试：

<div class="test">class样式只作用在一个元素上</div>

alert($('.test').html());

　　8.2 class样式作用在多个元素上 

　　说明：获取到的多个jquery对象组成的数组

<div class="test">class样式作用在多个元素上 </div><div class="test">测试jquery通过class获取页面元素</div>

var array = $('.test');
for(var i=0;i<array.length;i++) {
    alert($(array[i]).html());
}

　　说明：通过class样式选取页面元素可以实现批量修改css样式

　　举例：

<div class="test">class样式作用在多个元素上 </div><div class="test">测试jquery通过class获取页面元素</div> 

$('.test').css({height:'100px',width:'500px',border:'1px solid red'}); 

　　效果：页面上所有class="test"的元素，都会起作用

UpdateTime--2017年11月6日17:24:32

9. jquery通过标签获取页面元素

　　当页面上使用唯一一个标签时，获取到的有且只有一个jquery元素

　　举例：$('body')

 

与君共勉：最实用的自律是攒钱，最养眼的自律是健身，最健康的自律是早睡，最改变气质的自律是看书，最好的自律是经济独立 。

您的一个点赞，一句留言，一次打赏，就是博主创作的动力源泉！

↓↓↓↓↓↓写的不错，对你有帮助？赏博主一口饭吧↓↓↓↓↓↓