JS与jQuery小结

JS

JS 是什么

javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。

JS语法

数组的定义：

<script>
	var arr = [];//空数组
	var arr2 = [1,2,3];//直接赋值
			
	var arr3 = new Array();//空数组
	var arr4 = new Array(5);//数组长度为5
	var arr5 = new Array(11,22,33);//直接初始化
</script>

注意事项：数组可以动态扩展，可以访问不存在的元素返回undefined;并且数组是Object类型的对象。

函数的定义：

<script>
	//一：
	function show(){
		console.log("函数执行");
	}
	// 2(函数表达式)
	var show2 = function(){
		console.log("函数执行");
	}
	//3.匿名函数
	(function(x){
		console.log(x)
	})(100)
	// 4.函数的参数,只需要参数名
	function sub(x){
	}
</script>

对象的定义：

<script>
	 //1. 定义对象
	 var obj1 = new Object();//空对象

	 //js中对象可以动态添加属性和行为
	obj1.name="jack";
	obj1.speek = function(){};
	
	 // 2.通过构造函数定义
	// 构造函数的首字母大写
	function Student(name,age){
		this.name = name;
		this.age = age;
	 this.study = function(){
		 console.log(name+"好好学习");
		}
		var stu1 = new Student("jack",18);
		console.log(stu1);
	}
</script>

事件分类

• 浏览器窗体事件

事件名	描述
onload	当窗体内容被加载时触发
onunload	当窗体中内容卸载时触发
onbeforeunload	当窗体内容被卸载之前触发
onresize	当窗体大小被改变时出发

• 鼠标事件

事件名	描述
onclick	当鼠标单击时触发
ondblclick 当鼠标双击时触发
onmouseover	当鼠标悬停到元素上时触发
onmouseout	当输入从元素中移出时触发
onmouseenter	当鼠标进入时触发
onmouseleave	当鼠标离开时触发
onmousedown	当鼠标按下时触发
onmouseup	当鼠标抬起时触发

• 键盘事件

事件名	描述
onkeydown	当键盘按键被按下时触发
onkeyup	当键盘按键抬起触发
onkeypress	当键盘按键被按压时触发

• 表单事件

事件名	描述
onchange	当控件内容改变时触发
onselect	当控件内容被选中时触发
onblur	当控件失去焦点时触发
onfocus	当控件获得焦点时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

事件使用方式

1. 直接在元素上使用onXXX属性设置事件

<button onclick="btnClick()">按钮</button>

2. 通过DOM对象为元素绑定事件（常见）

<button id="btn">按钮</button>
<script>
	var btn = document.getElementById('btn')；
    btn.addEventListener('click',function(){
        //do...
    })
</script>

BOM对象

BOM(Browser Object Model)，浏览器对象模型，与所使用的浏览器直接相关的一些内置对象，目前浏览器的内核一般两个：（webkit，gecko）;BOM通常包含以下几个常见的内置对象：

1. Window
2. Screen
3. Location
4. Navigator
5. History
6. Document

DOM对象

DOM（Document Object Model）,文档对象模型，将html网页中的所有的元素当做一个对象进行操作，可以通过document对象操作指定元素的属性以及行为（函数）；HTML中将整个网页文档当做一颗倒置的文档树来理解

<script>
Document对象获取元素的几种方式:
			//根据Id获取元素
			var a =  document.getElementById("a");
			// 根据标签名获取元素集合
			var b = document.getElementsByTagName("input")
			// 根据元素 name属性获取元素集合
			var c = document.getElementsByName("c")
			// 根据元素class元素值获取元素集合
			var d = document.getElementsByClassName("b")
			// 根据指定的css选择器获取元素
			var e = document.querySelector("#a")
			// 根据指定的css选择器获取元素集合
			var f = document.querySelectorAll(".b")
</script>

jQuery

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架,是对JavaScript常用功能的封装。

jQuery的属性和样式

<div id="app"></div>
<input type="text" name="username">
<button id="">显示样式</button>
<button id="">移除样式</button>
<script>
		$(function(){
			$('#app').text('helloworld')//设置文本值
					 .html('<h1>属性操作</h1>')//添加html语句
					 .width(300)//设置宽
					 .height(100)//设置高
					 .attr('title','这是一级标题')//设置title内容
					 .prop('title','一级标题')//设置title内容
// attr prop 区别
				/*
					都可以用于获取和设置元素的属性值,
					prop只能获取或者设置元素存在的属性,
					比如div中不存在value,name属性,
					则无法通过prop函数操作,只能使用attr函数实现
				*/
				
</script>

注意事项： jQuery里的函数可以用来获取或设置值，可以链式编程。

jQuery与JS的转换

在编程过程中，js对象是不能调用jQuery对象的方法，jQuery也不能调用js的方法，所以需要类型转换。

<script>
	$(function(){
		$('btn1').click(){
			// $('#uname').value;这是js对象,不能调用value，应该是下面的方法
			var name = $('#uname').val();
			//将jQuery对象转换为原生js对象
			var name = $('#uname')[0].value;
			name = $('#uname').get(0).value;
					
			//将js对象转换为jQuery对象,只需要使用$()将目标对象包裹
			this js对象
			$(this) jQuery对象
					
					
			}
	})
</script>