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')
jQuery特性的更多相关文章
- 深入学习jQuery特性操作
× 目录 [1]获取特性 [2]设置特性 [3]删除特性 前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttrib ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- jquery,html5,css3主要特性总结
jquery特性: 1.丰富简单的DOM选择器 2.同一函数实现get和set 3.支持链式方法书写 4.完善的事件处理功能 5.强大的css动画效果 6.完善的Ajax 7.简单的元素样式操作 8. ...
- JS基础(四)之jQuery
31.jQuery(http://jquery.com/)是一个快速.简洁的JavaScript框架. 它封装了JavaScript常用的功能代码,提供一种便捷的JavaScript设计模式,优化HT ...
- js与jQuery实现方式对比汇总
CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...
- 关于前端jquery的总结
简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以代替传统DOM编程的操作方式和操作风格,通过对DOM API.DOM事件的封装,提供了一套全新的API,这套全新 ...
- 4_jquery
官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...
- ASP.NET MVC5高级编程 之 Ajax
jQuery不仅支持所有现代浏览器,包括IE.Firefox.Safari.Opera和Chrome等,还可以在编写代码和浏览器API冲突时隐藏不一致性(和错误). 1. jQuery jQuery擅 ...
随机推荐
- bzoj 4094: [Usaco2013 Dec]Optimal Milking
4094: [Usaco2013 Dec]Optimal Milking Description Farmer John最近购买了N(1 <= N <= 40000)台挤奶机,编号为1 . ...
- 精通android体系架构、mvc、常见的设计模式、控制反转(ioc)
1.请看某个著名的it公司一则招聘信息的其中一条要求:“熟悉android系统架构及相关技术,1年以上实际android平台开发经验:”,里面非常明确的说道要求熟练android系统架构,这从某种程度 ...
- [BZOJ5028]小Z的加油店
[BZOJ5028]小Z的加油店 题目大意: 一个长度为\(n(n\le10^5)\)的数列,\(m(m\le10^5)\)次操作,支持区间加和区间\(\gcd\). 思路: 线段树维护差分,\(\g ...
- hdu 3507 斜率优化
我的第一道斜率优化. 就这道题而言,写出原始的方程: dp[i] = min{ dp[j] + (sum[i]-sum[j])2 + M | j in [0,i) } O(n^2)的复杂度肯定超时, ...
- bzoj 3437: 小P的牧场 -- 斜率优化
3437: 小P的牧场 Time Limit: 10 Sec Memory Limit: 128 MB Description 小P在MC里有n个牧场,自西向东呈一字形排列(自西向东用1…n编号), ...
- leetcode132. Palindrome Partitioning II
leetcode132. Palindrome Partitioning II 题意: 给定一个字符串s,分区使分区的每个子字符串都是回文. 返回对于s的回文分割所需的最小削减. 例如,给定s =&q ...
- Linux知识(2)----中文输入法安装
Ubantu14.04在English的环境下,没有中文输入法,自带的ibus不完整.现在基于ibus框架,有几个比较好用的输入法,如sunpingyin和google pinying,还有五笔的输入 ...
- IDA IDC Tutorials: Additional Auto-Commenting
https://www.hex-rays.com/products/ida/support/tutorials/idc/autocomment.shtml This program creates a ...
- Digital Current-Mode Control Challenges Analog Counterparts
http://electronicdesign.com/digital-ics/digital-current-mode-control-challenges-analog-counterparts ...
- “花生壳” + “VisualSVN” 巧妙实现远程代码版本号控制
近期因为项目须要,要远程訪问svnserver,可是没有固定域名和ip,因此就打算用花生壳申请一个免费的域名构建一个server,再把VisualSVN部署在server上,就能够在外网訪问了(假设你 ...