前端历程(四)------javascript、HTML DOM和jquery

​ 本文章主要记录一下自己对于javascript对象、js html DOM对象以及jQuery对象的个人理解(对于js和jQuery的使用方法在这里不多说，官方文档有详细解说，网上的教程也非常的多)。对于这些东西了解的还很浅，会源源不断的学习了解并改进。

javascript

简介

​ JS(javascript)，可以插入到html中的轻量级编程脚本语言。在一个html中将js代码放在script标签中即可使用。js在html中主要的作用就是用来给网页增加动态功能的，放置功能函数。

js对象

​ 对于js中几乎所有的东西都可看作一个对象，字符串、数组等。对象是拥有属性和方法的数据。Javascript也是面向对象的语言，但它是一种基于原型Prototype的语言，而不是基于类的语言。

​ eg：

<script type="text/javascript">
	//使用函数构造对象	
  function zoo(name, age) {
		this.name = name;
		this.age = age;
		//将方法添加到对象里
  	this.changeAge = changeAge;
		function changeAge(age) {
			this.age = age;
		}
//  也可以这样写
// 	this.changeAge = function(age){
// 		this.age = age;
// 	}
	}
	//创建对象
	var monkey = new zoo("monkey", 2);
	monkey.changeAge(3);//调用方法
	console.log(monkey.age);  //输出为3

	//使用prototype可以在创建对象后还可以为类添加内部函数或是属性
//	monkey.prototype.sex = "公"; 对于单个对象使用prototype这只对monkey这一对象起作用
	zoo.prototype.sex;  //对于zoo添加sex的属性则让zoo的所有实例都有这个属性
	monkey.sex = "公";
	console.log(monkey.sex);	//输出为公
</script>

​ ps：js的基本数据类型有 Boolean，undefined，null，number，string
​ 应用类型有 object，array，function

HTML DOM（文档文本模型）

​ html DOM定义了所有 HTML 元素的对象和属性，以及访问它们的方法。可以把其看作为一个API，利用里面的方法可以对html元素进行访问、删除、修改、增加以及添加事件。

​ 通过DOM方法进行对于元素的操作首先需要找到需要操作的位置或者说是一个标志位，才可以使用特定的方法进行操作(获取到DOM对象)。一般有三种方法获取元素：通过id、通过标签名、通过类名。

​ 特别提醒：通过标签或者类名操作元素时getElementsByName()和getElementsByClassName()得到的是一个数组，要对某一个元素进行操作时要标注下表才能使用。(下面有例子解释)

<div id="test">			
	<p>测试1</p>
	<div class="test-div">测试2</div>
</div>
	<p>测试3</p>
<script>
	//因为id是唯一的,class和标签可以有重复,所以后者注意函数名称Element后有个s
	var a = document.getElementById("test");
	var b = document.getElementsByTagName("p");  //此方法会获取所有的p标签
	var c = document.getElementsByClassName("test-div");
	console.log(a);
	console.log(b);  //这里使用console.log(b[1].textContent);输出结果就是测试3
	console.log(c[0].textContent); 
</script>

​ 获取到元素就可以对其进行一系列的操作了，在这里只举几个比较常用的方法。

<div id="test2">
   方法测试
</div>
<script>
   var x = document.getElementById("test2");
//设置点击函数,也可以在变迁内加上onclick="函数名称".如：<div id="test" onclick="函数名称">
// x.onclick = function(){
// 	x.style.color = "blue";  //设置元素的字体颜色
// }
// x.onmouseover = function(){
// x.style.cursor = "pointer";
// 	x.innerHTML = "<b>方法测试2<b>";  //修改html
// }
// x.onmouseout = function(){
// 	x.innerText = "方法测试3";  //修改文本内容
// }
   var y = document.createElement("p");	//创建新元素
   y.innerText = "创建新元素";
   y.className = "add";	//给元素添加类
   x.appendChild(y);	//将新建的元素加到x里
</script>

jQuery

简介

​ jQuery是一种js框架，也可以是一个js的函数库，并含有许多插件(不是一门语言)。jQuery相对于js呢有优点也有缺点，优点是jQuery比较简单用起来很方便对于DOM操作不需要写那么复杂的函数名称和方法；缺点是jQuery使用需要引用jQuery.js文件，js运行在客户端(当然这样也导致了有一定的安全问题)，在html中可以直接使用，相比较js效率高等。

​ jQuery的使用文档可以到官网http://jquery.com/进行下载使用，也可以在官网了解学习。

使用简介

​ 使用基本语法$(selector).action();

<div id="test-jq">
	<p class="jq-text">jQuery使用测试</p>
</div>
<!-- 引用jQuery文档，是提前下载好的放在了js的文件夹下 -->
<script src="js/jquery.js"></script>
<script>
	$(function() {
		// alert("jQuery");
		var x = $(".jq-text");	//jQuery对象,许多时候对于DOM元素进行简单操作时可以直接用等号后面的.
		x.html("<b>加粗</b>");	//修改对象对应元素内的html
		x.text("使用测试");	//修改对象对应元素内的文本
	});
// 此方法是以下写法的简写可以理解为一个界面初始加载函数
// $(document).ready(function() {
// 	alert("jQuery");
// });
	$("#test-jq").click(function(){
		$(this).append("<p class='add'>jQuery使用测试2</p>");	//在对象对应元素内追加内容
	});	//对对象添加点击事件
</script>

js html DOM对象和jQuery对象相互转化。

​ 有时候我们在用jQuery写代码的时候意外用了js的方法，就会在控制台报错xxx不是一个函数或者不起作用(有的时候可能不小心写错，也不提示这是最头痛的)。下面介绍一下对象之间的转化。

jQuery—>DOM对象

//jquery对象就是一个数组对象，使用下表的方式或使用get(index)就可以转化
var x = $(".jq-text");	//创建jQuery对象
x[0].innerHTML = "<b>加粗</b>";  //或者使用x.get(0).innerHTML

js—>DOM对象

​ 对于此转化就可以回归到jQuery对象使用方法上，只需要用$()把DOM对象包起来就行。