jQuery特性
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')
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/7193583.html