javascript主要涉及三个部分：
- EMCAScript：描述了JS的语法和基本对象（JS可以看作是EMCAScript接口的一个实现类）
- BOM(浏览器对象模型)：与浏览器交互的方法和对象（其中也包含DOM）
- DOM(文档对象模型)：处理网页内容的方法和接口（内含大量语法）
1.DOM
DOM是文档对象模型，它指的是把文档当作一个对象来对待，这个对象主要定义了”处理网页的内容和接口的方法“。
2.BOM（对浏览器提供的API的统称，）
BOM是浏览器对象模型，它指的是将浏览器当作一个对象来对待，这个对象主要定义了”与浏览器进行交互的方法和接口“；
提供的API都放在window全局对象中，代表当前浏览器窗口。
JS常用的打印语句
第一种方式打印HelloWorld --- 将内容输出到浏览器窗口里
document . write("HelloWorld");
第二种方式打印HelloWorld --- 将Hell oWorld以警告框的形式在浏览器里输出
window. alert("HelloWorld");
如果函数或者属性是window对象的，则在调用时可以省略window,直接写函数名
第三种方式打印Helloworld --- 将HelloWorld打印输出到浏览器的控制台
console . info( "Hel1oWorld"); 相当于java里的System. out. print1n()1)数学运算符: +-*/ 号
注意:只要有可能计算出结果，js就会自动做类型切换算出结果。
2)判断相等性:
==
比较值是否相等
var a=3;
var b="3";
alert (a==b) ; --> true
比较值和类型是否完全相同
var a=3; var b="3" alert(a===b) --> false
3) typeof 判断变量的类型
4).流程控制---与java- 致.
if() {}
if() {}else() {}
for(var i=0;i<10;i++){}
while() { }
do{ }while ()定义函数
1）使用关键字function定义
有参无返
function 函数名( a, b ){ ..... }
有参有返
function add(a,b) { return a+b; }
2）隐式声明函数 --- 将函数看做是一个值
语法： var 函数名 = function(形参){ 函数体 } ；
使用： 函数名(实参);
案例： var fun1 = function(){ return “hello”; } ;
3）保存函数类型数据的变量之间可以互相赋值
// 将fun1里保存的“函数类型值”赋值给fun2，赋值成功后，fun2里存也是“函数类型值”
var fun1 = function(){ return “hello”; }
Var fun2 = fun1 ;
//调用fun1函数，将fun1函数的返回值赋值给fun3变量，成功后fun3里存放的是String类型值
Var fun3 = fun1(); 遍历对象属性 ： for...in语法
for( 变量 in 对象 ){
/ 循环每执行一次，会提取对象的一个“属性名”赋值给变量
对象[变量]
}JavaScript数组
1.特点: js里 的数组长度不固定，可以任意扩展;数据可以是任意类型。
2.创建:
var 数组名= [ 元素1， 元素2，….. ];
创建好以后可以任意扩展，添加任意元素。
3.访问:
1)一个元素(通过下标访问，从0开始)—arr1 [3]
2)遍历(与java一样，用for循环遍历)
for (var i=0;i<arr1.length;i++) { arr1[i] }
4.数组常见函数
数组对象.sort()—>对数组里的元素按照自然顺序升序排列
数组对象.push() —> 在数组的末尾插入一个元素
数组对象. pop()
—> 删除数组末尾的最后一个元素,且数组长度减一
delete数组对象[下标] —>删除指定位置元素，且数组长度不变
JavaScript中常见的事件源
DOM获取标签的API
DOM里面常见的属性
1）innerHTML ： 为标签设置标签体里的内容
2）this ：代表当前产生事件的标签对象
处理下拉列表的常见属性
1）下拉列表一般使用的是onchange事件
2）options — 值为数组类型，表示获取下拉列表里的所有option选项
3）selectedIndex — 值为数字类型，表示下拉列表里被选中的option的下标
4）清空下拉列表 — select.options.length=0;
5) 向下拉列表里添加一个option选项 创建一个option对象 ： var op = new Option(text,value); 添加到select里 ： select.options[下标] = op；
从网页中删除标签
1）需要通过父标签对象删除子标签对象：parentTag.removeChild( 子标签对象 );
2）对表格进行js处理时，主要针对的是tbody标签，不是table.
3）标签对象的一组相关关系属性：
tag.parentNode —-> 获取当前标签的父标签对象
tag.childNodes —–> 获取当前标签对象的所有孩子节点（标签和文本）
tag.firstChild —–> 第一个孩子节点
tag.lastChild ——-> 最后一个孩子
tag.nextSibling —–> 当前标签对象的同级下一个标签（“弟弟”）
tag.previousSibling —-> 当前标签对象的同级上一个标签（“哥哥”）
注意：js存在浏览器差异，google浏览器会默认将标签间的空格也算作孩子节点
4）删除的辅助功能
var ba = window.confirm(“提示文字”);
— 方法返回boolean值，表示对话框里的选择（确认–true 取消—false）
BOM编程
我们可以把js代码放在body下面，也可以设置页面加载完毕，再执行js代码，onload
当js文件和所用网页不在同一个文件里面是，我们可以把路径设置成如下所示
../js/jquery-1.8.3.js
jQuery是一个Javascript的框架
jQuery穿外套
$(function({
/***前端页面需执行的代码，访问action后 把数量的值拼进去**/
})；
jQuery获取标签对象的方法
$("#id的值")：
id选择器，根据id的值获取jQuery对象 【重点】
$(".class的值")：
class选择器，根据class的值获取jQuery对象【重点】
$("标签名称")：
标签选择器，根据标签名称 获取jQuery对象
$("标签名1,标签名2,#id的值"):
多路选择器 【重点】
$("selA selB"):
后代选择器，获取selA中所有selB(子子孙孙)的jQuery对象 【重点】
$("selA > selB"):
儿子选择器，获取selA中的子对象selB(儿子对象)的jQuery对象
$("selA:first"):
获取selA中的第1个jQuery对象 【重点】
$("selA:eq(index)"):
获取selA中下标=指定下标为index的对象
$("selA:gt(index)"):
获取selA中下标>指定下标为index的对象 【重点】
$(“selA:contains(text)”):
获取selA中文本内容包含text的对象 【重点】
$("selA:empty"):
获取selA中的空标签对象 【重点】
$("selA:checked"):
获取selA中所有选中的单选和复选对象 【重点】
$("selA:selected"):
获取selA中下拉列表中选中的项 【重点】
$("selA[属性名=值]")：
获取selA中指定属性名称=指定值 的jq对象 【重点】jQuery对象遍历
// 获取数组长度
length属性/size()方法
// 根据下标(从0开始)获取到jQuery对象
jQuery对象.eq(idx)
// jQuery遍历数组的方法
each()
语法 ：
jQuery对象.each(function(idx){
this --> 当前遍历的DOM对象
$(this) --> 当前遍历的jQuery对象
});jQuery操作对象的属性
jQuery对象.prop("属性名");
//获取对象的属性值
jQuery对象.prop("属性名","新值");
//设置属性的值(修改/添加)
jQuery对象.removeProp("属性名")
//删除属性
jQuery对象.css("样式属性名");
//获取对象的样式属性
jQuery对象.css("样式属性名","新值");
//修改对象的样式属性
//显示、隐藏
jQuery对象.hide(1000);
//隐藏，参数为毫秒数
jQuery对象.show(1000);
//显示
jQuery对象.addClass("新选择器名");
//添加class属性-类选择器 dom对象.className = "";
jQuery对象.removeClass("选择器名称");
//删除类选择器操作对象的标签体内容
jQuery对象.text(); //获取对象的文本内容
jQuery对象.text("新内容"); //设置文本内容(不支持HTML标签).innerText("");
.html(); //获取对象的html标签体内容
.html("新内容"); //设置对象的标签体内容(支持HTML标签).innerHTML("");
获取表单元素的值
jQuery对象.val(); //获取值
jQuery对象.val("新值"); //修改值 // jQuery的事件处理
// 语法：
jQuery对象.事件名(function(){
// 功能代码
})
// 页面加载完成后，执行JS
// $(function(){直接在此处写代码可以省略每一个函数都写一个ready，意思均为页面加载完成后，执行JS});
$(document).ready(function(){
$("#btn1").click(function(){
alert("hello....");
});
});
// 简化形式
$(function(){
//功能代码
});
// 注意：jQuery的事件名，是在JS事件名基础上去掉on，做为方法名调用
复合单击事件
// 第1次单击执行func1，第2次执行func2，第3次func3，第4次func1
toggle(func1,func2,func3);
// 复合鼠标 移入/移出 事件
hover(func1,func2);
//添加对象（父子间操作）
父对象.append(子对象); //添加成 父对象的最后1个 儿子对象
子对象.appendTo(父对象); //向目标结尾插入匹配元素集合中的每个元素。
父对象.prepend(子对象); //向匹配元素集合中的每个元素结尾插入由参数指定的内容。
区别 1.append()前面是被插入的对象，后面是要在对象内插入的元素内容。
2.appendTo()前面是要插入的元素内容，而后面是被插入的对象。
//插入对象（兄弟间操作）
旧对象.befor(新对象); //在当前对象的前面添加
旧对象.after(新对象); //在当前对象的后面添加
//删除对象
jquery对象.remove(); //彻底删除（连同自身标签一起删除）
jquery对象.empty(); //保留自身标签，删除其所有文本和子标签
//关系方法
parent(); //父对象
children(); //所有子对象
next(); //下一个兄弟对象
prev(); //前一个兄弟对象
DOM结构简介
原文地址:https://blog.csdn.net/zhuo_yueya/article/details/126001411
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_6453.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
