第一天上传我的前端基础笔记
第一部分：JQ
节点.on事件 = function() {}
jq对象.事件(function(e){ });
get("#id");
get("tag");
createElement("div", {...});
// 给一个div设置一个样式，为其添加点击事件
var div = 。。。
div.style.pppp = pppp;
div.onclick = function() {}
// jq
$("#dv")
.css({color:"red",backgroundColor:"yellow"})
.click(function(){})
.ff
// 给#dv中的a标签添加点击事件
var div = ...
var alist = div.get....
for(...) {
}
// 隐式迭代
$("#dv a").click(function() {});
bootstrap
<div class="center">
</div>
[5,6,7].concat.apply([], 1,2,3)
// [5,6,7,1,2,3]
var arg = 0;
$.map(arr, function(v, i) {
return v + arg;
})
var f = function() {};
var arg = 0;
$.map(arr, f, arg);
----------------
get("#id").find().css().sss().s()....
var jk = {item:[],
fn:function(){
// ...
return this;
},
get:function(){
// ...
return this;
},
find:function(){
// ...
return this;
},
css:function(){
// ...
return this;
}
};
jk.get().css().foind()...
1.jq中常用的选择器有：
id #id
类 .className
标签 标签名
通用 *
语法：$("选择器").方法()
设置样式常用方法：
.css()
.css("样式名","样式值") //一次只能设置一个样式
.css({
样式名："值"，
样式名："值"， //一次可以设置多个样式
})
.html()方法和.text()方法相当于js中的innerHTML和innerText
语法：
字符串=jq对象.text();
jq对象.html("字符串");
2.多条件选择器（组合 ， 复合）
$("#id.target,className")
3.层次选择器
后代选择器 $(祖代 后代)
子代选择器 $(父>子)
紧随选择器 $(前+后)//$(前+*)
紧随的同义方法 $(前).next(选择器)或$(前).next()
向后选择器 $(前~后)//$(前~ *)
向后的同义方法 $(前).nextAll(选择器)或$(前).nextAll()
向前选择器 $(现).priv()与privAll()
反选方法 $(现).siblings()
所有选择器 $('*')
注：选择器表达式中的空格不能多也不能少
使用.end()方法可以将破坏的链回复到原来的样子
addClass() 给元素添加类样式
removeClass() 移除元素的类样式
hasClass() 判断元素是否具有类样式
toggleClass() 切换类样式，有就移除，没有就加上
4.基本的过滤选择器
// 过滤器，用于过滤选中的元素
// 语法： $("选择器:过滤器")
// 在选择器选中的所有元素中，根据过滤器进行筛选
// $("选择器").filter(过滤器)
// 将选中的元素当数组看，
// 找里面的第一个(:first),最后一个(:last)
// 奇数个(:odd),偶数个(:even),大于指定索引(:gt(i))
// 小于指定索引(:lt(i)),等于指定索引(:eq(i))
// 不具备指定选择器(:not(selector))
// 过滤器可以累积使用
// :过滤:过滤
// 执行等价于，一步一步的执行过滤，后面的过滤用前面过滤的结果做源
例如：$("#dv a:first").text("选中的文本和节点");
// 直接获得元素
// :header获得页面中所有的h标签
// :animated正在执行jq动画的元素
// :focus
例如： $("#dv :header").css("color", "olive");只在div里面找h
$(" :header").css("color", "olive"); 在整个页面里面找h
属性过滤器的语法
[属性名]
[属性名=值]
例如： 获得页面中所有有name属性的标签
$("*[name]") *可以省略
例如： 获得表单下性别的标签
$("#form input[type=checkbox][name=sex]")
[name*=value] 包含
[name^=value] 以value开头的属性
[name$=value] 以value结尾的属性
[name!=value] 不为value值的属性
[name|=value] 属性值以value开头，并使以前缀的形式出现 jk-color
[name~=value] 专门匹配用空格隔开的属性(除了在开头和结尾处)
例如： $("[jk][jk!=jk]").css("color", "red");
$("[jk$=jk]").css("color", "red");
$("[jk|=j]").css("color", "red");
checked会得到checkbox、radio和select //checked可以得到选中的结果，如果要选中全部只需将checked设为true，全不选就设为false即可
selected只会得到select标签
enabled 选取表单中所有启用的元素
disenabled 选取表单中所有未被启用的元素
内容过滤器：
:contains 包含该内容的标签
$("div:contains(3)").css("border", "1px solid red");
empty 为空的标签
$("div:empty").css({ width: "200px", height: "150px", border: "1px dashed red" });
has() 是否包含该选择器或标签
$("div:has(:input)").css({ width: "200px", height: "150px", border: "1px dashed green" });
parent 可以找父类的标签
$("div:has(*) > *:parent").css("border", "1px solid red");
10.DOM对象和JQ对象的相互转换：
将DOM对象转换成jq对象：只需要将DOM对象用$砸一下即可$（DOM对象）
将jq对象转换成DOM对象：1.jq对象[0] 2.jq对象.get(0) 两种方法
11.jq中的.html()方法和.text()方法 为了实现innerHTNL和innerText
语法：传参设置 无参取值
字符串=jq对象.text();
jq对象.html();
12..val()方法和.text()用法类似，等价于设置和获取元素的value值
13 .attr()方法等价于setAttribute()和getAttribute()方法（传参设置 无参取值）
语法：jq对象.attr("属性","值");
字符串=jq对象.attr("属性");
14.相对定位：
1. $("选择器1","选择器2")
第二个参数可以是选择器 DOM对象 jq对象等，作用是在第二个参数中找符合要求的元素。
如：$("span","this.parentNode").text("星"); 在当前选中元素的父元素中找span元素并将其值改为星。
2.jq对象.find("选择器") 作用是在jq对象的后代元素中找符合要求的元素。
如：$("this.parentNode").find("span").text("星"); 在当前选中元素的父元素中找span元素并将其值改为星。
15.end()方法：恢复链即返回到最近一次破坏链的地方
16.处理页面元素的类样式：
（1）addClass() 给元素添加类样式
（2）removeClass() 移除元素的类样式
（3）hasClass() 判断元素是否具有类样式
（4）(重点)toggleClass() 切换类样式，有就移除，没有就加上
17. jq中DOM操作就是创建节点 设置节点属性attr()，获得节点熟悉，追加节点,移除指定的节点removeAttr()
创建元素的语法：$("html代码")
jq中追加元素的办法：
父.append(子)或者 子.appendTo(父)
第二部分：JS
1、 复习
-> js背景
-> 代码的位置<script type="text/javascript"></script>
-> 在一个页面中，所有的script共享一个编程区域
-> 词法流程控制运算符
-> 基本类型number、boolean、string(Number、Boolean、String)
-> 互相转换(重点)
-> 函数(难点)
-> 函数是一等公民
-> 函数是一个值
-> 匿名函数(Lambda函数)
-> 对象(难点)
-> 就是键值对
-> 创建方法new和json对象
-> 关联数组的用法
2、 变量名提升(作用域)
-> js中不具备块级作用域
-> js中函数里面的变量是局部作用域
-> js访问变量的规则(*)
js在解析变量的时候，首先在当前作用域中找是否具有这个变量
如果有就直接使用，如果没有就到上一级作用域链中寻找，直到没有找到爆出错误
3、 Math.random
(0-1) -> (n,m) (4,20)
函数图像
5、 DOM的操作，就是用JavaScript操作HTML节点
-> 将HTML变成DOM树
看到HTML会画DOM
-> 创建节点，添加节点，删除节点
var nodeObj = document.createElement("节点名");
document.createTextNode("文本");
父节点.appendChild(子节点);
父节点.removeChild(子节点);
// 获得节点
document.getElementById("id号");
document.getElementsByTagName("html的标签名");
父节点.getElementsByTagName("html的标签名");
// 节点的属性
nodeType 1元素节点 2属性节点 3文本节点
nodeName 元素节点使用，返回标签名的大写字符串
nodeValue 文本节点使用，返回或设置文本
// 获得子元素的节点
父节点.childNodes
父节点.firstChild
父节点.lastChild
// 获得兄弟节点
当前节点.nextSiblings
-> 设置节点的属性
节点.setAttribute(属性名, 值);
节点.getAttribute(属性名);
// 一般的做法，可以设置或获取
节点.属性名
-> 设置文本
文本节点.nodeValue
6.句柄操作（一个对象可以同时添加多个句柄，他们之间互不影响）
addEventListener("事件名（click onfous 等）",function)
removeEventListener("要操作的类型（click onfous 等）",function)
在小于等于ie8中添加事件和移除事件分别是：attachEvent,detachEvent
例如 document.getElementById("btn").addEventListener("click",function(){alert("hello")});
document.getElementById("btn").removeEventListener("click",function(){alert("hello")});
7.事件对象event(可以简写e)
type: 获取事件类型
target：获取事件目标
stopPropagation（）：阻止事件冒泡
preventDefault（）：阻止事件的默认行为
例如：
<a href="第一个网站 .html" id="aid">第一个网站</a>
document.getElementById("aid").addEventListener("click", fun);
function fun(e) {
e.stopPropagation(); /*阻止事件冒泡*/
e.preventDefault();/*阻止事件的默认行为*/
alert(e.type); 返回结果是click
alert(e.target);返回结果是 http://localhost:6958/%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99%20.html
}
8. Data对象
getFullYear() 获取年份
getTime() 获取毫秒 从1970年开始算起到目前
setFullYear() 设置具体的日期
getDay() 获取星期
9.数组常用的方法
concat() 拼接两个数组 a.concat(b)
sort() 升序
push() 在a数组的末尾追加一个d ；a.push("d")
reverse() 反转数组
10.Math方法
round() 四舍五入
random() 0-1之间的随机数
Max()
Min()
abs()
11.闭包的概念：
将高级作用域链（作用域链的数字较大）中的函数赋值给低级作用域链，
那么低级作用域链（作用域链的数字较大）中的成员就可以访问高级作用域链中的成员。
12.函数的四种调用模式：
函数 ： 直接调用函数
方法 ： 必须要有对象 （var o={name:"找监狱"} o.say=function(){}）
构造函数 : 任何一个函数放在new后面就是构造函数，构造函数的this和方法中德this一样
构造函数的return发生变化，如果返回的是对象则直接返回，否则返回创建出来的对象
apply或call：函数名.apply(对象，[参数数组])
函数名.call(对象，参数列表)
**注意的是：在方法调用模式中this指得是当前对象（即上面的o），在函数调用模式中this指的是全局对象（window）。另外 如果把函数赋值给一个对象，那么此时this指的就是这个对象而不再是window
13.火狐浏览器中获取屏幕的高度宽度分别用：window.screen.availWidth window.screen.availHeight
14.超链接 href里面的this代表window，只有事件中的this=事件源（也就是被选中的项）
