您的位置:首页 > Web前端 > JavaScript

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

2017-05-12 16:06 183 查看
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这么语言能实现的功能足以表达清晰。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐