今天主要内容:
JavaScript
Dom
jQuery
http://www.cnblogs.com/wupeiqi/articles/5369773.html
今天主要内容大致了解:
javascript
1.首先要知道 JavaScript 和 Java 没有半毛钱关系.
2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器.
3.javascript 能实现什么.javascript就是让我们的前端页面(html)动起来.怎样让它动?
假如现在有一个页面,页面上有一个标签,用浏览器展示出来,现在我们用javascript把它删掉或者在这个标签上下在加一个标签,是不是就动了!!那么是不是给我们的感觉就有一个动画的效果了.
对javascript 就是进行删除标签,修改标签,或者修改css的.
Dom
其实我们经常听到的前端所说的JS,其实就是指javascript+dom.
javascript实现了对html文件中的html标签或者css进行修改的,而dom就提供了查找指定标签或者css的方法.
我们既然说dom提供了查找 xxx的方法,那么我们可定会想到dom就是一个类,类实例化成为一个对象后就有相应的方法了.
对没错,dom其实就是一个类.在html中用docment代表dom实例化后的对象.除了提供一些查找的方法,还提供一些alert(),confirm(),consol.log()等等方法.
jQuery
jQuery是什么?其实jQuery严格意义上来说它什么都不是,不算是一种具有独特功能的技术模块.
我们通过javascript+dom两个东西,我们就可以在页面上做任何操作了.但是对于复杂的操作的话.我们需要很多步骤调用很多方法,可能100行代码才能实现.
而jquery它帮你把所有的功能都封装到一个包里面了.我们只需要引用这个包,调用它的方法,复杂的逻辑,复杂的运算它帮我们做,我们只需要知道一个函数名.
对于你来说,使用它能让你少做很多步操作就能实现很复杂的功能.
jQuery的产生就是为了简化程序员代码量.它相当于封装了javascript和dom的类库.
你后就不用写javascript和dom了,直接使用jque 就可以完成非常复杂的操作了.
我们既然说jQuery封装了javascript和dom,并且以后前端也用jQuery就行了,不用写原生的javascript和dom了,那么为什么不跳过javascript和dom呢,直接学jQuery呢.
因为,他们是基础,不知道原理,你用jQuery会很不顺手的.
下面我们依次学习:
JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编辑相应代码之后,浏览器可以解释并做出相应的处理.
1. JavaScript代码存在形式
<!-- 方式一 -->
<script type="text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type="text/javascript">
Js代码内容
</script>
2. JavaScript代码存在位置
HTML的head中
HTML的body代码块底部(推荐)
由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放到body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已.
<!--下面这个js文件在远端服务器,假设远端服务器挂了,浏览器再解释这段代码的时候会一直找下去,从而导致页面一直是大白页,直至等待超时报错-->
<!--当代码放到底部时,即使js耗时严重,之前的html代码也都执行完了.-->
<!--引入js文件的方式-->
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<!--js代码块写到script标签中-->
<script>
alert('123');
</script>
3. 变量
全局变量
局部变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个var开头,如果未使用var,则默认声明的是全局变量.
var name = 'ted' #局部变量
age = 18
注: 注释// 或/* */
4. 基本数据类型
数字(Number)
var page = 111;
var age = Number(18);
var a1 = 1,a2 =2, a3 =3;
parseInt("1.2"); #转换成数字类型
parseFloat("1.2"); # 转换成数字类型,只是在显示的时候带小数点
var age = '18.2'
console.log(parseInt(age),typeof parseInt(age) )
结果 18 "number"
var age2 = '193.3'
console.log(parseFloat(age2),typeof parseFloat(age2))
结果:193.3 "number"
注: JavaScript中是没有float浮点数的,数据类型都是number,只是在显示的时候不一样
字符串(String)
var name = 'ted';
var name = String('ted');
var age_str = String(18);
常用的方法:
obj.trim() #去除两边的空格
obj.charAt(index) #索引取值
obj.substring(start,end) #获取字符串的子序列,类似于切片,开始的位置,结束的位置. 顾头不顾尾
obj.indexOf(char) # 获取某一个字符的索引位置
obj.length # 显示字符串的长度
布尔(Boolean)
var status = true;
var status = false;
var status = Boolen(1==1)
数组(Array)
数组是我们以后写代码中最长用到的.数组就等价于python的列表.在python里面用list创建列表,而在js里list = Array
创建数组的两种方法
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')
常用方法：
添加
obj.push(ele) 追加
obj.unshift(ele) 最前插入
obj.splice(index,0,'content') 指定索引插入,中间这个0一定要有
移除
obj.pop() 移除尾部,并获取
obj.shift() 移除头部,并获取
obj.splice(index,count) 数组指定位置后count个字符并获取,是几个字符,不是索引,
["xx", "oo", "oo", 11, 22, 33, "aa"]
li.splice('1',2) 这里的2是个数,前面的1是索引位置
["oo", "oo"]
li
["xx", 11, 22, 33, "aa"]
切片
obj.slice(start,end)
合并
newArray ＝ obj1.concat(obj2)
翻转
obj.reverse()
字符串化
obj.join('_') 将数组里的元素,使用'_"进行连接
长度
obj.length 显示长度
字典
对于javascript内部是没有字典类型的他是通过一个类来实现的.这句话怎么理解呢,意思是,如果你执行了下面的语句,它其实生成了一个对象,这个对象内部其实就像字典.反应到代码就是如下:
var items = {'k1': 123, 'k2': 'tony'}
items
Object {k1: 123, k2: "tony"}
我们看到,输入items显示上面一个东西.
对于基本的数据类型,就这么多,以后的操作就是对这些数据类型进行操作.并且还有些用不到.
接下来补充一点,并且是以后用的最多的.
在 python中有json,是将对象序列化和反序列化的.在js中也有json
用法如下:
items #这是一个字典
Object {k1: 123, k2: "tony"}
s = JSON.stringify(items) # 序列化过程
"{"k1":123,"k2":"tony"}"
s # 查看序列化后的结果
"{"k1":123,"k2":"tony"}"
JSON.parse(s) # 反序列化过程
Object {k1: 123, k2: "tony"}
这个一定要会
undefined
undefined表示未定义值
var name;
null
5、循环语句
var names = ["alex", "tony", "rain"];
// 数组：方式一
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
// 数组：方式二
for(var index in names){
console.log(index);
console.log(names[index]);
}
var names = {"name": "alex", "age": 18};
// 字典：方式一
for(var index in names){
console.log(index);
console.log(names[index]);
}
// while循环
while(条件){
// break;
// continue;
}
6. 条件语句
//if条件语句
if(条件){
}else if(条件){
}else{
}
var name = 'alex';
var age = 1;
// switch,case语句
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
7、异常处理
try{
}catch(e) {
}finally{
}
8、函数
函数的声明
function func(arg){
return true;
}
匿名函数
var func = function(arg){
return "tony";
}
自执行函数
(function(arg){
console.log(arg);
})('123')
9、面向对象
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);
Dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器
document.getElementById('id'); # 通过标签id获取 对象,这里获得的对象只有一个,因为在html中id是不允许重复的
document.getElementsByName('name'); # 通过name属性获取 指定的对象,这里获得的是列表,即使是只有一个也被放到列表里
document.getElementsByTagName('tagname'); # 通过标签的种类获取指定的对象,这里获得的是列表,即使是只有一个也被放到列表里
2、内容
innerText # 获取标签对象内的所有文本值(不包括标签)
var obj = document.getElementsByTagName('div') # obj获得的是列表,所以要取 [0]
HTML页面body部分有以下代码:
<div>
sbssbsbsbsbs
<h2 id="111">index1</h2>
</div>
<h2>index2</h2>
<script type="text/javascript">
var aaa = 1;
switch (aaa) {
case 1:
console.log('111111');
break;
case 2:
console.log('222222');
break;
default:
console.log('333333');
}
</script>
用谷歌浏览器打开上面这个网页,并且在console中输入以下内容:
var obj = document.getElementsByTagName('div')
obj[0].innerText
"sbssbsbsbsbs
index1
"
上面我们看到div标签中有字符串和一个h2标签,当使用 obj.innerText获取内容的时候,把div里的字符串和h2标签里的内容都获取到了,但是却没有获取到h2标签(只是把标签的字符串值拿到了)
innerHTML # 获取标签对象内的所有值(包括标签)
接着上面的例子,我们使用innerHTML看看获取到什么值?
obj[0].innerHTML
"
sbssbsbsbsbs
<h2 id="111">index1</h2>
"
把包含在div标签下的子标签+字符串都获取到了.
var obj = document.getElementById('nid')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容
总结:innerText 和 innerHTML取文本内容和包含标签的内容
但是又些特殊的标签,就不能使用innerText来获取值,只能使用obj.value来获取值.
特殊的：
input系列
textarea标签
select标签
value属性操作用户输入和选择的值
代码实例1:
<form action="">
<input type="text" name="username" value='123'>
<input type="password" name="pwd" value="456">
</form>
<script>
var obj1 = document.getElementsByName('pwd')[0] ;
var obj2 = document.getElementsByName('username')[0];
console.log(obj1,obj2)
console.log(obj1.value,obj2.value)
</script>
代码实例2:(代码实现了获取文本内容,并修改文本内容.这个例子要看懂,)
<body>
<input type="text" id="text1">
<input type="button" value="获取input里的值" onclick="getvalue();"/>
<script type="text/javascript">
function getvalue(){
var obj1 = document.getElementById('text1')
var text = obj1.value
alert(text)
obj1.value = ''
}
</script>
</body>
代码实例3:(获取select里的value)
<body>
<select id="n3">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
</select>
<input type="button" value="获取input里的值" onclick="getvalue();"/>
<script type="text/javascript">
function getvalue(){
var obj1 = document.getElementById('n3')
console.log(obj1.value)
alert(obj1.value)
}
</script>
</body>
代码实例4:
场景:有a连接,我们希望点击a连接的文本在添加一条一模一样的a连接怎么做?
<body>
<a href="http://www.oldboyedu.com/" onclick="f1();">添加</a>
<script type="text/javascript">
function f1(){
alert(123)
}
</script>
上面的代码,会出现当你添加a连接,后,f1()里的js代码会执行,但执行完成后,紧接着会跳转到www.oldboyedu.com 这个网站.
那么问题来了.我们不希望在执行完f1()函数后跳转应该怎样实现呢? 实现方法,就是定义a标签的onclick事件反回false,这样就不会跳转了.
于是代码如下:
<body>
<a href="http://www.oldboyedu.com/" onclick="return f1();">添加</a>
<script type="text/javascript">
function f1(){
alert(123)
return false
}
</script>
</body>
小扩展:
有下面这段html代码
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i in lis) {
console.log(i);
}
</script>
</body>
用谷歌浏览器打开,你会发现,for循环不仅打印了111,222,333还有其他的一些元素.如下:
0
1
2
length
item
namedItem
这样就不是我们想要的结果了.那么如何解决呢.就用关于数组的第二种for循环方法:
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i = 0;i<lis.length;i++){
console.log(i)
}
</script>
</body>
浏览器打开此页面,看到console中显示:
接下来看一个小实例:我们看到有些页面让你填写购买商品的数量,然后旁边有一个加号,和减号.那么如何实现的呢?
<body>
<input type="button" value="-" onclick="sub_num();"/>
<div id="num">1</div>
<input type="button" value="+" onclick="add_num();"/>
<script>
function add_num(){
var obj = document.getElementById('num');
var get_num = parseInt(obj.innerText);
get_num += 1;
obj.innerText = get_num
}
function sub_num(){
var obj = document.getElementById('num');
var get_num = parseInt(obj.innerText);
if(get_num<=0){
alert("数量不能为负数")
} else {
get_num -= 1
obj.innerText = get_num
}
}
</script>
</body>
js 中操作的步骤:
1.找到这个标签
2.获取标签里的字符串
3.将获取到的值加1或者减1
3、创建标签
方式一(采用对象的模式)：
var obj = document.createElement('a');
obj.href = "http://www.etiantian.org";
obj.innerText = "老男孩";
var container = document.getElementById('container');
//container.appendChild(obj);
// 对象要被添加的地方,必须使用appendClild(),如果使用container.innerHTML = obj 添加的不是整个标签对象,而是http://www.etiantian.org 这个字符串.
// 记住,如果要使用对象模式,就使用appendChild
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh'));
方式二：
var container = document.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
//container.insertAdjacentHTML("beforeEnd",obj); 前面指定位置,后面那个参数指定要加的对象
4、标签属性
var obj = document.getElementById('container');
固定属性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px";
#我们知道在fontSize在style的真实写法是 style = 'font-size = 88px;'
# 所以当通过 obj.style.xxYx 找style里面的元素时,遇到 - 的时候,就把-去掉,并把-后面的字符大写:如font-size 写成 fontSize
自定义属性
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)
5、提交表单
document.geElementById('form').submit()
之前我们做提交表单,都是使用form标签,普通方式的代码如下:
<form action="http://www.sogou.com/web" method="get">
<input name="query" type="text" >
<input type="submit" value="提交">
</form>
这是我们通过submit标签提交的,那么我们想,能不能通过div标签提交?
能,默认肯定不能提交,解决办法那是不是在div中加onclick事件,
提交的流程:
1.找到这个要提交的form 标签
2. 执行form_obj.submit()方法就可以提交了.
代码如下:
<body>
<form id="form1" action="http://www.sogou.com/web" method="get">
<input name="query" type="text" >
<!--<input type="submit" value="提交">-->
<div onclick="f1();">提交</div>
</form>
<script type="text/javascript">
function f1() {
document.getElementById('form1').submit();
}
</script>
</body>
上面的知识点:不仅submit可以提交form表单,其他也可以.
设置默认要求提交时表单不能为空:
场景:我们知道当我们登录网站,输入用户名和密码时,要通过form标签和input里的submit类型标签.
正常情况下,我们点击submit标签就会把form中的input.value内容提交到后台.
那么如用户只输入用户名没输入密码时,是不是要告诉用户:"你有没填写的字段,不能提交".
实现方法就是在submit标签加上onclick事件,然后去校验几个input标签里是否有值.如果没满足条件就让onclick事件反回false.
具体代码如下:
<body>
<form id="form1" action="http://www.sogou.com/web" method="get">
<input name="query" type="text" >
<input type="submit" onclick="return f3();" value="提22交">
</form>
<script type="text/javascript">
function f3() {
var q = document.getElementsByName('query')[0];
if (q.value.trim()){
alert('11111')
return true;
} else {
alert("22222");
return false;
}
}
</script>
</body>
6、事件
7、其他功能
console.log()
alert()
confirm()
# confirm 有什么用呢?我们在页面上删除某条纪录,有时会出来一个"确认"和"取消"的窗口,这就是confirm.
确认反回的是true,取消反回的是false
代码举例:
<body>
<input type="button" value="上来啊" onmousemove="MyConfirm();">
<script>
function MyConfirm(){
var ret = confirm("是不是要点!")
alert(ret)
}
</script>
</body>
这是confirm最简单的实现方法,真实开发中,一般情况下confirm弹窗咱们是自己写的,因为默认的太难看了.
// URL和刷新
location.href 获取当前html文件的访问路径
location.href = "url" 可以获得,当然也可以赋值,赋值的时候相当于跳转了
window.location.reload() 重新加载
这两个好用处不大
// 定时器
setInterval("alert()",2000);
clearInterval(obj)
#告诉大家,setInterval其实就是每隔多长时间创建一个线程,用这个东西能做什么呢?可以做标签的滚动效果.
setTimeout(); # 和setInterval 用法一样,不一样的是只执行一次.比如说setTimeout('f1()',2000)意思是过两秒后执行一次f1函数
clearTimeout(obj)
# setTimeout() 的应用场景:我们看到qq邮箱删除邮件的时候,在页面上会提示删除邮件成功,5秒后这个提示字样消失了.就是用setTimeout做的.
# 具体是,当你点击删除的时候,立马跳出删除成功的标签.紧接着在函数中在调用setTimeout('删除这个标签的函数',5000)
jQuery 简介
学了jQuery后,你不能理解为就不用js和Dom了,应该说复杂的操作都用jQuery操作.而相对于简单的操作,jQuery没必要去封装简单的操作.
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
我们使用js,dom ,jQuery 最终目的让html页面动起来.
动起来技术实现方法就是让 事件 和 改html文件里的内容 关联起来
改 html 文件内容就需要两部分:
1. 获取要改动的标签
2. 修改
无论是使用js还是使用jQuery都是围绕着上面两个目的进行的 .
所以jQuery提供的方法,从功能上大致就分为两个方法:1.获取标签 2.修改
jQuery实现了几百种方法,多,但是无论多牛B的网站也都没全用到,只会用到那么一些常用的(大概几十种).
jQuery之基本选择器
jQuery中提供的用于获取标签的方法都有哪些?
jQuery提供的 "选择器" 和 "筛选器" 两大分类都是用于获取标签的方法.
选择器获得的是结果集,筛选器是从结果集里跳出来指定条件的 很好理解
筛选器: 过滤 查找 串联
最基本的选择器(3种):
$("#id").text('123'); #id 选择器,找到1个对象
$("a").text('2222'); # 标签选择器,找到对象集合,并且内部循环将这些对象的字符串值设置成222
$(".c1").text('3333') # class选择器,找到 对象集合,并且内部循环将这些对象的字符串值设置成333
上面3中选择器是jQuery中最基本的选择器,一定要会.
还有要会组合使用它们,如:
$("#n3 div .c4 span").text('4444') # 找到id为n3标签下的div标签下的class为c4下的span标签的字符串值设置成4444
一次查找多个类型的选择器时用逗号隔开,如下:
$("div,a,.c4").text('555') 查找所有div,所有a标签以及所有calssname为c4的标签,并把它们的字符串值设置成555
接下来看看一些其他选择器:不要求记住,但是你要知道,当碰到某些场景,你能想起来哪种类型的,能够查到即可.
比较重要的:
属性选择器类:
筛选器以下几种必须要会:
children() 目标标签的儿子们
find() 找到的结果集中find
next() 目标标签的下一个兄弟标签
nextAll() 目标标签的下面的所有兄弟标签
parent() 目标标签的父标签
prev() 目标标签的上一个标签
prevall() 目标标签的上面所有的兄弟标签
siblings() 目标标签的所有兄弟标签
这些筛选器里的方法只要记住,能完成99.99%的工作