学习整理--对js的新认识

Js即JavaScript，对这门语言，也只是最近做一点项目才有一个新的认识（也可以理解之前对js理解浅薄，或者温故而知新）。

之前的理解：

Js只不过是在前台做一些小的功能，点击点击按钮啊，鼠标路过显示导航栏啊之类的。当然也是没有系统接触（系统接触好像也不多），遇到一个事情就百度。任务能完成，效率时间却很令人捉急。

产生这种情况，还是因为对JavaScrip和Jquery理解不深。如果把JavaScrip比作是java语言，那么Jquery就是工具包（package）。我需要实现某个功能，我其实可以用纯java语言写出来，但是这些系统的或者别人封装的package，能让我的代码量更少，思路更清晰，编程更简单。Write less do more!

Jquery就是用javascript写了很多的函数封装好了的库文件。所以当我们引用这个库的时候，同时我们要自定义函数时，就要注意函数的命名了（我就意外的一次命名冲突，导致一个问题困扰很久，很惭愧）。当然，有人会说，可以设置优先级嘛，但是即使没有出错，也不利于该页面的维护和扩展。所以，打算用Jquery，就好好学一下。

这里在通过代码分析一下：

纯Javascript实现：

var obj=document.getElementById("h01");

obj.innerHTML="Hello jQuery";

引入Jquery实现：

$("#h01").html("Hello jQuery");

很简单的一个例子

再来一个例子：

纯Javascript实现：

document.getElementById("image").src="landscape.jpg";

引入Jquery实现：

$("#image").setAttribute("src","landscape.jpg");

很简单的功能实现，但是明显使用Jquery框架，思路更清晰、代码更少。所以，我们得赶快学好Jquery，否则下次编程引入jquery，但出现了document.getElementById()就尴尬了。

再来说说我理解的js语言：

js对大小写敏感

js拥有动态数据类型，相同的变量可作用不同的类型。Js字符串、数字、布尔、数组、对象。偶尔遇到的Undefined(表示不含有值，例如：var x)，还能（使用关键词new来）声明新变量类型（说白了就是对象）。

js有完善的运算符类型，比较、ifelse、switch、for、while、break、trycatch throw等（不同语言，规则不同，道理却很相通）。

对于初学者，重要的还是怎么控制html。JavaScript能改变页面中所有的HTML元素、HTML属性、CSS样式、对所有事件做出反应。

1、查找html元素，通过id、标签名（getElementsByTagName）、类名查找元素。

2、操作

操作内容：document.getElementById(id).innerHTML=newHTML；

eg:document.getElementById(“box”).innerHTML=”box”；

操作属性：document.getElementById(id).attribute=newvalue;

eg: document.getElementById(“box”).name=”boxname”;

改变样式：document.getElementById(id).style.property=newstyle

eg: document.getElementById(“box”).style.color=”red”

3、事件

onload、onunload 事件，进入或离开页面触发（处理cookie）

onchange 事件,发生改变触发事件

onmouseover、onmouseout事件，鼠标移至元素上方或移除元素时触发，一般结合使用

onmousedown、onmouseup、onclick事件，点击鼠标按钮、释放鼠标按钮、完成鼠标点击。可用于实现拖动页面元素

onfocus 获取焦点

4、添加删除节点

添加：

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

删除：

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

相应的jquery就有write less do more的感觉(总之，不懂就查官方文档http://www.w3school.com.cn/，百度博客什么的，都不是很靠谱儿，或者说效率低)

1、一般语法规则：$(selector).action()

2、选择器：

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$("#box_1") 选取所有 id="box_1" 的元素。

$(".box_2") 选取所有 class="box_2" 的 <p> 元素

 

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。

3、Html（Dom）操作：

text()--设置或返回所选元素的文本内容

html()--设置或返回所选元素的内容(包括HTML标记)

val()---设置或返回表单字段的值

attr()--获取属性值eg:attr(“href”)

append() (元素结尾)和 prepend()（元素开头）方法添加若干新元素remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

css() 方法设置或返回被选元素的一个或多个样式属性eg: $("p").css("background-color","yellow");

js是一套完整体系的语言，其实java或者c++,c又何其不是呢？规则都是相通的，规则都很少，使用是变通的

总之，要详细学，推荐http://www.w3school.com.cn/网站，当对js有一个基本的了解，再去学jQuery框架，基本的js编程应该没问题。

我有个朋友说，未来的发展，是没有后端，因为随着计算机的优化，移动端的性能足够强、后台服务器都可以不用了。这句话正确与否不论，但js这么语言能实现的功能足以表达清晰。