我是靠谱客的博主 勤奋咖啡,最近开发中收集的这篇文章主要介绍学习整理--对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这么语言能实现的功能足以表达清晰。


最后

以上就是勤奋咖啡为你收集整理的学习整理--对js的新认识的全部内容,希望文章能够帮你解决学习整理--对js的新认识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部