本文深入探讨了JavaScript的基础用法，包括事件处理、语法特性、BOM与DOM操作，以及面向对象编程。同时，介绍了jQuery的选择器、DOM操作、动画效果和AJAX请求，涵盖了从页面交互到异步数据处理的全面内容。
JavaScript：不是java，做页面交互（动画，事件）
1、用法
（1）事件 行内用法 <a href="#" onclick="alert(11)">132</a>
（2）页内
<script type="text/javascript">
function ok(){
alert(11);
}
</script>
（3）页外
<script type="text/javascript" src="js/my.js"></script>
2、语法（弱类型）
var a = 100; //不指定类型，根据内容
a = "fiwe"; //随时更换类型
c = "13221"; //var可省略
d = [1,2,3,4]; //数组
e = {name:"dsa",sex:2}; //定义对象
alert(e.name);//对象属性
function add(a,b){ //函数定义（不指定返回，参数不指定类型-）
if(!b)b=100; //判断null，undefined，false
return a+b;
}
var add = function(a,b,c){ return c(a,b)；} //变量值为函数
fun(11,22,function(c,d){ //匿名函数
alert(c+d);
}
null 空，NaN 计算失败，undefined 未定义
3、BOM browser object model 浏览器对象模型
navigator 浏览器基本信息（浏览器兼容）
navigator.product
screen 对象包含用户屏幕的信息
screen.deviceXDPI
history 对象包含浏览器历史
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮
history.length
location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
location.reload(); F5刷新
location.href=“http://www.baidu.com”; 转到目标地址
window 对象 所有bom对象上级
窗口方法
window.open("http://www.baidu.com","_self");
window.open("index.html","_new",'width=200,height=100');
this.resizeTo(300,500);
scrollBy()
moveTo()
close();
对话框
alert(); 消息对话框
if(confirm("yes/no")){ 选择对话框
alert("yes");
}
var str=prompt("input"); 录入对话框
alert(str);
计时器：
var pos;
function size(){
clearTimeout(pos);
}
function ok(){
pos = setTimeout(function(){
alert("ok");
},1000);
}
4、DOM document object model 文档对象模型（每个标签就是对象）
获取对象：
（1）标签id属性就为变量名 mydiv.innerHTML="";
（2）使用getElementById
var d=document.getElementById("mydiv");
d.innerHTML="213";
（3） var d=document.getElementsByTagName("div");
d[0].innerHTML="213";
（4） var d=document.getElementsByClassName("aa");
d[0].innerHTML="213";
修改对象：
value值/input
name
innerHTML
d[1].style.color="#00ff00"; //操控css
var left = d[1].offsetLeft; //只读
创建删除：
创建：
方法一：
var d=document.getElementsByTagName("div");
d[0].innerHTML="<a href="#">132</a>";
方法二：
var a = document.createElement("a");
a.href = "#";
a.innerHTML="fsaf";
d[0].appendChild(a);
删除：
var d = document.getElementsByTagName("a");
d[1].parentElement.removeChild(d[1]);
事件：（冒泡事件）
onclick = “ok()” 标签加入事件
window.onload = function(){ } js脚本加入事件
event对象 事件对象（公共事件）
this 对象 事件源本身
5、面向对象
var user = {name:"ysz",sex:1,mov:function(x,y){ //json数据处理
alert(x+y);
},sub:[2,6,"324"]}; //prop
alert(user.name);
user.mov(5,8);
alert(user.sub[2]);
function user(){ //类
this.name="135"; //实例变量
this.mov=function(){ //实例方法
alert(this.name);
add();
}
function add(){ //私有方法
alert(sex);
}
var sex = 0; //私有变量
}
var u = new user();
alert(u.name);
u.mov();
继承
1.原型
unction user(){
}
user.prototype.age = 100;
var u = new user();
alert(u.age);
2.call
function user(){
this.age = 14;
}
function myuser(){
user.call(this);
this.name = "454";
}
var u = new myuser();
alert(u.age);
alert(u.name);
cavas
6、调试
console.log(12151); //Java system.out 只有控制台能看见
7、ajax Asynchronous Javascript And XML（异步 JavaScript 和 XML）
发出异步请求（web服务器）
function send1(){
var hr = new XMLHttpRequest(); //创建
hr.open("GET","a.json",true); //设置
hr.onreadystatechange = function(){
if(hr.readyState==4){ //判断状态
var str = hr.responseText; //回应内容
var obj = eval("("+str+")"); //json转换prop
mya.innerText = obj.name;
}
}
hr.send(); //发送，可以带参数
}
异步请求处理：
先定义.onreadystatechange 再发送
json：
与prop对象一致，不能加方法
键值必须加" “，值 数字，boolean可以不加”"
字符：
{}对象
[]数组
键：值；键：值；
数组和对象可以无限嵌套
bootstrap：（css框架）
CDN：CDN服务器 内容分发网络
css定制样式（控件，标签）
css栅格（动态布局）xs,sm,md,lg自小到大，四种大小
1.head里加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
2.根容器
.container （固定宽度）
.container-fluid（100% 宽度）
3.创建行，列
<div class="row"> //每行
<div class="col-md-6 col-sm-10"
style="height: 100px;background: #f0f;"></div>
<div class="col-md-6 col-sm-2"
style="height: 100px;background: #f00;"></div>
</div>
摆放不开（12个列超出）自动换行
.clearfix 列可能会出现比别的列高 列高对齐
.col-md-offset-4 将列向右侧偏移
.col-md-push-3 列排序
.hidden-xs 隐藏
.visible-xs 显示
js工具（控件控制）
jQuery强依赖
jQuery（js工具库）
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
1、选择器
$("a") css选择器一致
$("a").length 获取选择的数量
var htmlelement = $("div")[0]; 转换jQuery到js标签对象
var 选择器 = $(js标签对象); 转换js标签对象到jquery
var a = $("dddd").add($("div")).add($("div")); //方法连用
选择器容器添加
var a = $("div").add($("a")); //定义变量时加入，否则加入失败
遍历：
var a=$("div").add($("a"));
a.each(function(i,o){ //i索引 o每个js对象
alert(o);
})
2、检索
上级
parent 一级上级
parents 沿着上级查询符合条件的
$(o).parents("span")
兄弟
prev() prevAll() 之前的
next() nextAll() 之后的
siblings() 查询符合条件的所有兄弟
下级
children(expr) 一层子元素，直接的孩子节点
find(expr) 子孙全部
contents() 查找下面的所有内容，包括节点和文本
3、dom操作
text(文本) 无参数获取+有参数设置文本
html(html脚本) 无参数获取+有参数设置内容（文本）
$(".aaa").html("<a href=''>ddd</a>");
attr(属性名称，值) 1参数获取+2参数设置属性
prop((属性名称，值) 1参数获取+2参数设置属性 推荐
val(值) 无参数获取+有参数设置value属性
css(prop)
$(o).css({color:"#0000ff",background:"00ff00"});
如果有-的属性：
“backgrpund-color”加“”
backgroundCorlor 去掉-，后字母大写
css((属性名称，值)
$(o).css("color","#0000ff");
增删改查标签：
1. $(".aaa").html("<a href=''>ddd</a>");
2. var a=$("<a></a>").attr("href","#").text("fewif");
$(".aaa").append(a);
3.$(".aaa").remove(); 删除自身
$(".aaa").empty(); 清空自身内容
加载完成：
$(function(){
//替代window.onload
})
事件：
event.cancelBubble = true; 终止冒泡
$(document).bind("click",".aaa",function(){
alert(1);
event.cancelBubble = true; //组合$(".bbb").bind
});
bind方法：绑定事件，（包括未创建的）
4、动画
hide() 和 show() 隐藏和显示 HTML 元素
fadeIn() fadeOut() fadeToggle() fadeTo()淡入淡出效果
slideDown() slideUp() slideToggle()滑动效果
$(".bbb").hide(5000,function(){ //动画时间，回调方法
alert(1);
});
animate() 自定义动画
$(".bbb").animate({width:"50px",height:"50px"},2000);
5、ajax
$.post("a.json",{},function(json){
},"json");
$.ajax({
type: 'post',
url: 'a.da',
dataType: 'json', 返回对象类型
async:true,
contentType:"application/x-www-form-urlencoded"
'application/json' 后台处理json
'multipart/form-data' 文件
data:{} 请求参数
success:function(JSON){
//结果处理
}
扫一扫
2974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
