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')
最新文章
- PHP-PHP-FPM的max_children一些误区
- IntelliJ IDEA 14和Maven创建java web项目
- 开启curl扩展(转)
- Android与JS混编(js调用android相机)
- 【转】Java与C#语言级比较
- 分享个人如何DIY网站的经验
- jQuery 监听元素内容变化的方法
- 编写原生JS的insertAfter函数
- Jenkins-FQA
- 【转】 Python调用(运行)外部程序
- Appium python自动化测试系列之页面滑动原理讲解(十)
- Nginx 反向代理 负载均衡 虚拟主机
- SAP中的一些简称及简要介绍
- Linux系统修改日期时间
- Spring Boot + Mybatis + Redis二级缓存开发指南
- [SDOI2011]计算器(exgcd&;BSGS)
- MATLAB的一些小经验,记下来,facilitate future work
- [NHibernate] Guid 作主键速度超慢的背后
- 使用JavaScript的XMLHttpRequest发送POST、GET请求以及接收返回值
- 【LOJ】 #2132. 「NOI2015」荷马史诗
热门文章
- Parse要垮了
- Spring Boot中Request method &#39;PUT&#39; not supported
- struts2漏洞S2-046修复解决方案
- linux基础命令学习(二)文件和目录操作
- Windows Sysinternals Suite
- 吐血推荐250部必看电影下载 IMDB TOP 250 download
- DAC calibrates 4- to 20-mA output current
- gitignore / Delphi.gitignore
- x64 寄存器使用
- WebKit 在 Windows 平台下编译小结