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);//数组长度为5var 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	表单提交时触发

事件使用方式

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

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

通过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通常包含以下几个常见的内置对象：

Window
Screen
Location
Navigator
History
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>

JS与jQuery小结相关推荐

jquery.validate.js的使用小结
2019独角兽企业重金招聘Python工程师标准>>> jquery很好的网站:http://www.runoob.com/jquery/jquery-plugin-validate ...
JS和jQuery基础
JS和jQuery 一.贯穿案例展示:控制页面弹出对话框 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LAjO69PE-1667629663007)(assets/i ...
js基础day01小结
第02阶段.前端基本功.前端基础.入门语法计算机知识补充学习目标理解简单了解计算机组成认识计算机内存一. 核心内容 1. 计算机组成 1.1 软件(程序) 系统软件:Windows.Lin ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作运行图片目录路径连连看水果方块版.html 连连看算法进行下一个游戏的开发! 注意事项我会把html文件.css文件提供下载地址,文件夹路径也展 ...
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
事件委托技术原理和使用（js，jquery）
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理摘自http:/ ...
获得焦点时选择文本框的所有内容（Vanilla JS或jQuery）
本文翻译自:Select all contents of textbox when it receives focus (Vanilla JS or jQuery) 什么是Vanilla JS或jQu ...
JS和JQUERY的区别
JS和JQUERY的区别 ①.根据ID取元素 { JS:取到的是一个DOM对象. 例:var div = document.getElementByID("one"); JQUER ...

JS与jQuery小结

JS