popeyesailorman / aice-cnanson Goto Github PK
View Code? Open in Web Editor NEWwelcome to my world
welcome to my world
本文来源:http://www.zhangxinxu.com/wordpress/?p=3223
1&&3
return 3
(在下面做出解释);
关于操作符,在这里再记下数据转换的规则 1 == true 0 == false
巩固基础知识:
var compare = 5 > 3 // true
var result = "Bill" < "amy";
//ture
B的字符编码为66,a的字符编码为97
var result = "bill" < "amy";
//false
b排在a之后
比如一个字符串和数字比较,字符串会被转换为数字,然后再比较。但是两个字符串比较,就是比较字符编码:
var result1 = "23" < 3 //false "23"被转为23
var result2 = "23" < "3" //true "2"的字符编码是50,"3"的字符编码是51
但是当字符串不能被转换为一个合理的数值时:
var result = "a" < 3; //false 因为"a"被转换为了NaN
任何操作数与NaN比较,结果都是false,所以:
var result = "a" < 3; //false
var result = "a" >= 3; //false
两组操作符:相等和不相等——先转换类型再比较
全等和不全等——仅比较而不转换类型
var result1 = ("55" == 55) //true 因为转换后相等
var result2 = ("55" === 55) //false 因为不同的数据类型不相等
var result1 = ("55" != 55) // false 因为转换后相等
var result2 = ("55" !== 55) // true 因为不同的数据类型不相等
在转换不同的数据类型时相等不等遵循以下基本规则:
1)如果第一个操作数为对象,则返回第二个操作数;
3)如果两个操作数都是对象,则返回第二个操作数;
逻辑与操作属于短路操作,只要第一个为false。第二个不论什么结果都不可能为true;
1) 如果第一个操作数为对象,则返回第一个操作数;
2) 如果第一个操作数求值结果为false,则返回第二操作数;
3)如果两个操作数都是对象,则返回第一个操作数;
4)如果有两个为都null,则返回null;若有两个为都NaN,则返回NaN, 若两个都为undefined,则返回undefined
逻辑或也属于短路操作,如果第一个操作数求值结果为true,就不会对第二个操作数求值了;
1 && 3 // return 3
2 && 3 // return 3
0 && 3 // return 0
-1 && 3 // return 3
true && 3 // return true
false && 3 // return false
true || 3 // return true
false || 3 // return 3
1 || 3 // return 1
2 || 3 // return 2
0 || 3 // return 3
-1 || 3 // return -1
既然false==0,false && 3 //return false
那么 false && 3 == 0 是否成立??是否return true ?
答案是 :false;
因为 == 运算符优先于 && 运算符
即先 :运算 3 == 0 // false 因为只有 false == 0 和 0 == 0;
然后: 运算 false && false // false
2 长得像 && 只有当&&前面有 0 或者 false null 或者 undefined 则返回第一项 ,其他后面不管是什么都返回 第二项;
1 长得像 | | 只有当 | | 前面有 0 或者 false null 或者 undefined 则返回第二项 ,其他后面不管是什么都返回 第一项;
可以避免if嵌套。例如,要问页面上某个dom绑定点击事件,我们需要先判断这个dom元素存不存在,我们可能会这样做:
var dom = document.querySelector("#dom");
if (dom) { dom.addEventListener("click", function() {}); }
实际上,我们可以使用&&做一些简化:
var dom = document.querySelector("#dom");
dom && dom.addEventListener("click", function() {});
1.form表单里面都有input元素
先说关于$("input")和$(":input")的区别:
demo: https://output.jsbin.com/gogekug
发现 :input的作用是查找所有的input元素:包括 input, textarea, select 和 button 元素。而input只是查找到input标签
上面例子还有一个有趣的地方,就是在 input type 的checked属性为false的时候他也是被选中。于是有了下面的demo:
发现只要html标签上面有checked属性,不管它的属性值true还是false,都会被选中,除非没有checked属性,既然只要加了checked属性就会被选择,那如何将它选中取消呢?
js方法:
document.getElementById("myCheck").checked
= false;
jq方法:
$("#myCheck").attr('checked','false');
$("#myCheck").prop('checked','false');
那attr()和prop()方法有什么区别呢
还是上面的例子:
代码:
attr方法:$("input").attr("checked");
结果:
console.log(checked,checked,checked,checked,undefined);
prop方法: $("input").prop("checked");
结果:
console.log(true,true,true,true,false);
发现,用attr() 取到input的checked属性值时为checked,而用prop()方法返回的则是布尔值。
为何用attr()取到checked的属性值为checked而不是true或者false
测试用attr() 取到不同属性来看看:
代码:
<input id="a" type="checkbox" checked data-index="1">
方法:
$("input").attr('type');
$("input").attr('checked');
$("input").attr('data-index');
结果:
console.log('checkbox','checked',1);
跟上面一样,而用prop()方法来取到不同的属性来看看:
代码:
<input id="a" type="checkbox" checked data-index="1">
方法:
$("input").prop('type');
$("input").prop('checked');
$("input").prop('data-index');
结果:
console.log('type','true','undefined');
发现:
第一类,自定义的属性:
有该属性和属性值:用attr()方法返回它的属性值,prop()方法返回undefined;
有该属性无属性值(包括属性值为空):用attr()方法返回空字符串 : '',prop()方法返回undefined;
无该属性:attr() 返回空字符串,prop()返回undefined;
第二类,元素固有属性:
有该属性和属性值:用attr()和prop()方法,都可以获取到他到属性值,如id ,class,type,title等;
有该属性无属性值(包括属性值为空):用attr()方法返回空字符串 : '',prop()方法返回空字符串: '';
无该属性:attr()返回undefined,prop返回空字符串;
第三类:checked,selected属性:
有该属性和属性值:用attr()方法返回checked和selected,用prop()方法返回true(不管属性值为false或者true);
有该属性无属性值:用attr()方法返回checked和selected,用prop()方法返回true;
无该属性:attr()返回undefined,prop()返回false;
第四类: novalidate属性:
有该属性和属性值:attr()返回novalidate,prop()返回undefined;
有该属性无属性值:attr()返回'',prop()返回undefined;
无该属性:attr()返回undefined,prop()返回undefined;
总结:
attr: attr("属性"); 只能获取已设置在元素本身上的属性值,包括固有属性和新增属性,没有设置的属性结果返回undefined,设置了属性,没有设置属性值的返回空字符串;
prop: prop("属性") ; 只能获取固有属性的属性值(html上有这个属性则返回true,html上无这个属性则返回false,不管这个属性的属性值为true还是false),新增属性的属性值无法被获取到;
2.关于设置属性:
attr: attr("属性名","属性值"); 既可以设置元素固有的属性,也可以设置元素本来不存在的属性;
prop: prop("属性名","属性值"); 只能设置固有的html属性;
attr和prop使用版本不同,jquery1.6之前只有attr,jquery1.6之后才有prop。
三、关于form表单的novalidate属性
Internet Explorer 10、Firefox、Opera 和 Chrome 都支持 novalidate 属性。
注意:在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。
虽然兼容性不怎么好,但是我们可以用在h5上面
novalidate 属性是 HTML5 中的新属性。novalidate 属性规定当提交表单时不对表单数据(输入)进行验证。novalidate为HTML5表单内置的属性(W3C草案),可以让现代浏览器(IE10+, FireFox, Chrome, Opera等)默认不对表单做验证(忽略required, pattern等)
http://output.jsbin.com/vefosew
demo: http://output.jsbin.com/nedigup
([a-zA-Z])\1 表示匹配到相同的a或z(大小写不限制)
([a-z])\1{2} 表达连续三个相同的小写字母。
代码:
<div>我是文本内容<p>我是段落</p></div>
<div>我是文本内容</div>
<div>我是文本内容</div>
<div>我是文本内容</div>
执行:
var text = $("div").text();
var html = $("div").html();
var val = $("input").val();
.val()方法和.html()相同,.html()除了文本内容还会获取html标签,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
1.如何设置默认所有的ajax请求返回格式是json?
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
dataType
类型:String 可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
2.ajax中tranditional参数是什么作用?
这个属性默认是false,jquery会深度序列化这个对象,以适应PHP等框架,我们可以通过设置tradtional为true阻止深度序列化,
3.哪些情况会触发ajax的error回调?
返回数据类型不是JSON; 网络中断; 后台响应中断
4.如果想要请求jsonp数据格式,该如何设置?
什么是跨域:
所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、、<iframe>
在js的<script>标签中似乎不会涉及到跨域的问题,所以我们就利用<script>标签将向不同域提交HTTP请求。这种技术就叫做jsonp。
JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 js 代码,网页端接受响应,然后就直接执行了,和通过 script 标签引用外部文件的原理是一样的。JSONP不支持POST请求仅仅执行GET请求。
传递一个callback参数给跨域服务端,然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
跨域服务端提供的js脚本动态生成,这样调用者可以传一个参数过去告诉跨域服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是跨域服务器就可以按照客户端的需求来生成js脚本并响应了。
跨域服务器
文件:flightResult.php
代码:
flightHandler({
"code":"CA1998",
"price": 1780,
"tickets": 5
});
本地:
js:
<script type="text/javascript">
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
};
var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
jq:
<script type="text/javascript">
$.ajax({
url:"跨域服务器/flightResult.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
//jsonpCallback:"flightHandler",//可选,jQuery把返回放到success里了。默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success:function(data) {
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
},
timeout:3000
});
</script>
5.$.getScript作用是什么?
API:http://jquery.cuishifeng.cn/jQuery.getScript.html
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
## 参数
url,[callback]
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
## demo:
$.getScript("https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js", function(){
alert('我加载并执行了jquery.min.js.js');
});
var date = new Date(时间戳); //获取一个时间对象
例子:
// 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
var date = new Date(1398250549490);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
// 输出结果:2014-04-23 18:55:49
// 有三种方式获取,在后面会讲到三种方式的区别
time1 = date.getTime();
time2 = date.valueOf();
time3 = Date.parse(date);
/*
三种获取的区别:
第一、第二种:会精确到毫秒
第三种:只能精确到秒,毫秒将用0来代替
比如上面代码输出的结果(一眼就能看出区别):
1398250549123
1398250549123
1398250549000
*/
3. Date()参数形式有7种
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date("yyyy/MM/dd hh:mm:ss");
new Date("yyyy/MM/dd");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);
比如:
new Date("September 16,2016 14:15:05");
new Date("September 16,2016");
new Date("2016/09/16 14:15:05");
new Date("2016/09/16");
new Date(2016,8,16,14,15,5); // 月份从0~11
new Date(2016,8,16);
new Date(1474006780);
1.ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型
关于基本类型和引用类型,这篇文章已经做了详细的讲解:
https://segmentfault.com/a/1190000002789651
文中关于基本类型和引用类型的图解:
var name = 'yangfan';
var city = 'shanghai';
var age = 22;
jquery对象就是一个类数组对象,属于引用类型,引用类型的值是同时保存在栈内存和堆内存中的:
var person1 = {name:'yangfan'};
var person2 = {name:'yangfan1'};
var person3 = {name:'yangfan2'};
jquery对象转换成dom对象的方法,即[index]和get(index):
var
var dom = $("#dom")[0]; //dom对象
var dom = $("#dom").get(0); //dom对象
dom对象转换为jquery对象
对于一个dom对象。只需要用$()把dom对象包装起来,就可以获得一个jquery对象
var dom = document.getElementById('dom');
var
类数组对象是引用类型
引用类型时按引用访问的,换句话说就是比较两个对象的堆内存中的地址是否相同,那很明显,两个类数组在堆内存中地址是不同的:
var elA = $("body");
var elB = $("body");
elA == elB // false
var a = 5;
var b = a;
a = 6;
console.log(a); // 6
console.log(b); // 5
所以,与简单赋值不同,这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个对象。那么赋值操作后,两个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。因此,改变其中任何一个变量,都会相互影响:
var a = {x:5,y:7}
var b = a;
a.x = 8;
console.log(a); // {x: 8,y:7}
console.log(b); // {x: 8,y:7}
var elA = $("body").eq(0);
elA.css('background-color','red');
var elB = $("body").get(0);
elB.style.backgroundColor = 'blue';
3..each()方法里面传入两个参数,一个是索引,一个是值
a:代表索引即key值
b:代表值即value
elA.each(function(a,b) {
console.log(this);
console.log(a);
console.log(b);
});
测试:
var person = {
'name': 'yang',
'age': '22',
'city': 'shanghai'
};
for (var i in person) {
console.log(i); // name age city
console.log(person[i]); // yang 22 shanghai
}
类数组里面不像数组,是有顺序之分的。如:若要获取person的名字:
person.name 或 person['name']
但如果对象的key值为数字的话:
var person = {
0: 'yang',
1: '22',
'city': 'shanghai'
};
console.log(person[0]);
就要写成 person[0]
这种形式不能写成 person.0;
elA.data('someKey','someValue'); //jq 设置
console.log(elB.data('someKey')); //jq获得 someValue
console.log(elA.attr('data-someKey')); // 通过他的dom获得 undefined
console.log(document.body.someKey); // 通过他的dom 获得 undefined
elB.attr('data-key','someValue2'); // 设置dom
console.log(elA.data('key')); // jq 获得 someValue2
console.log(elB.data('key')); // jq 获得 someValue2
即:
使用 attr() 每次都从DOM元素中取属性的值,或设置值且显示在html标签上,用jq的 .data()属性可以获取其属性值;
使用 .data() 是从将其属性值保存在内存中,不会显示在html上 用.attr()方法获得不到其属性;
同时从性能的角度来说,建议使用$.data()来进行set和get操作,因为它仅仅修改的Jquey对象的属性值,不会引起额外的DOM操作。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.