前端笔记（Javascript,JQuery）
JavaScript
JavaScript代码需要放置在标签内部的最下方
1.基本语法
- 注释
// 单行注释
/*
* 多行注释
*/
- 变量
name = 'my string'; // 全局变量
var name = 'my string'; // 局部变量
- 数据类型
a = 18; // 数字
b = true; // 布尔类型
c = [11,22,33,44]; // 数组
d = {'key1':'value1', 'key2':'value2'}; //字典
/* 字符串 */
e = 'sjl';
e.chartAt(1); //索引位置
e.substring(0,1); //裁切(起始位置，结束位置)
e.lenght; //获取当前字符串长度
- 判断
/*
&& ||
== != 不严格比较（不比较数据类型）
=== !== 严格比较
*/
//条件语句
var i;
if(i<10){
console.log("i小于10");
}
else if(i>100){
console.log("i大于100");
}
else{
console.log("i在10到100之间");
}
//3元条件语句
var v = i>10?'真值':'假值';
//选择语句
switch(c){
case 1:console.log("i为1");
case 2:console.log("i为2");
case 3:console.log("i为3");
default:console.log("i不为1、2、3");
}
- 循环
// for循环
for(var i=0;i<10;i++){
console.log(i);
}
a = [11,22,33,44]
for(var item in a){
console.log(a[item]);
}
b = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(a[item]);
}
// while循环
var i=0;
while (i<10)
{
console.log(i);
}
// do...while循环
do
{
console.log(i);
}
while (i<7);
//结构控制
continue;
break;
- 函数
// 普通函数
function func(){
console.log(666);
}
// 匿名函数
setInterval(function(){
console.log(666);
},5000)
// 自执行函数（创建函数并且自动执行）
(function(arg){
console.log(arg);
})(666)
2.库函数
- json序列化
JSON.stringify(obj) // 序列化
JSON.parse(str) // 反序列化
- 转义
var str = 'my string'
decodeURI(str) // URl字符解码
encodeURI(str) // URI字符编码
decodeURIComponent(str) // URI组件中的未转义字符
encodeURIComponent(str) // 转义URI组件中的字符
escape(str) // 对字符串转义
unescape(str) // 给转义字符串解码
- 时间( Date类)
var d = new Date();
d.getMonth(); // 获取月份，获取其他的 getXXX
d.setMonth(); // 设置月份，设置其他的 setXXX
- 执行代码
eval("1+1") // 表达式/代码都可以执行
- 正则表达式
rep = /\d+/;
rep.text("sdkjahcuisan44454") //判断字符串是否符合规定的正则
rep = /\d+/g; //全局匹配，后面加个g，匹配一个拿一个
rep.exec("sdkja66hcuisan44454") //获取匹配的数据
/*
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
*/
3.作用域
- js以一个函数{}为一个作用域
function func(){
if(1==1){
var name = 'sjl';
}
console.log(name);
}
func();
//输出:sjl
- 函数的作用域在函数未被调用之前，就以创建
- 函数的作用域存在作用域链，而且也是在被调用前创建
// 例1 =================================
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
var xo = "lsm";
console.log(xo);
}
inner();
}
func();
//输出:lsm
// 例2 =================================
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
console.log(xo);
}
return inner;
}
var ret = func();
ret();
//输出:lyy
// 例3 =================================
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
console.log(xo);
}
var xo = "yp";
return inner;
}
var ret = func();
ret();
//输出:yp
//func函数执行的时候xo就已经替换成"yp"了，所以执行inner函数往上一个函数链找得到的xo=yp
- 函数内局部变量在创建时就已经声明
function func(){
console.log(xxoo);
}
func()
//程序直接报错
function func(){
console.log(xxoo);
var xxoo = "sjl";
}
func();
//输出:undefined（变量声明了，但是在执行的时候才赋值）
4.面向对象
- 创建对象
function foo(){
var xo = "sjl";
}
function Foo(n){
this.name = n;
}
function Fooo(n){
this.name = n;
this.logName = function(){
console.log(this.name);
}
}
foo();
var obj1 = new Foo("I");
var obj2 = new Foo("WE");
- 原型
function Foo(n){
this.name = n;
}
// Foo的原型,无论实例多少个对象，在内存里只会生成一个函数
Foo.prototype = {
'sayName': function(){
console.log(this.name);
}
}
obj1 = new Foo("we");
obj1.sayName();
obj2 = new Foo("wee");
DOM
1.查找标签
// 以下的obj的代指 var obj = document.getElementById("item1");
- 标签直接找
document.getElementById("mid"); // 根据ID获取一个标签
document.getElementsByName("mnm"); // 根据name属性获取标签集合
document.getElementsByClassName("mcls"); // 根据class属性获取标签集合
document.getElementsByTagName("div"); // 根据标签名获取标签集合
- 标签间接找
obj.parentNode // 父节点
obj.childNodes // 所有子节点
obj.firstChild // 第一个子节点
obj.lastChild // 最后一个子节点
obj.nextSibling // 下一个兄弟节点
obj.previousSibling // 上一个兄弟节点
obj.parentElement // 父节点标签元素
obj.children // 所有子标签
obj.firstElementChild // 第一个子标签元素
obj.lastElementChild // 最后一个子标签元素
obj.nextElementtSibling // 下一个兄弟标签元素
obj.previousElementSibling // 上一个兄弟标签元素
document.getElementById("item1").parentNode; // 用法示例
2.元素操作
- 文本操作
obj.innerText = ""; // 仅文本，忽略标签 标签当字符串赋值进去
obj.innerHTML = ""; // 全部内容 可以赋值标签
obj.value; // 获取和赋值(input系列,textarea)
obj.selectIndex; // select标签特有的(select)
- 样式操作
obj.className // 获取所有类名 添加class
obj.classList // 获取所有类
obj.classList.remove(cls) // 删除指定类
obj.classList.add(cls) // 添加类
obj.style.color // 操作单个样式
obj.style.backgroundColor // 操作单个样式
- 属性操作
obj.attributes // 获取所有标签属性
obj.setAttribute("style","color:red"); // 设置标签属性
obj.getAttribute("value"); // 获取指定标签属性
obj.removeAttribute("value"); // 移除指定标签属性
- 标签操作
// 方式一
var obj = "<input type='text' />";
node.insertAdjacentHTML("beforeEnd",obj);
node.insertAdjacentElement('afterBegin',document.createElement('p')) //外面套一个<p>标签
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
node.appendChild(tag) //放入<a>标签里面
document.getElementById("i1").appendChild(tag);
- 表单和其他操作
//任何标签通过DOM提交表单
document.getElementById("form_id").submit();
console.log(1); // 控制台输出
alert("message"); // 弹出框
var b = confirm("message"); // 确认框,返回true或false
location.href; // 获取当前的URL
location.href = "url"; // 重定向到"url"
location.reload(); // 重新加载页面
// 多次定时器
window.setInterval(
function(){
console.log(666);
},5000)
window.clearInterval(obj) // 清除多次定时器
// 单次定时器
window.setTimeout(
function(){
console.log(666);
},5000)
clearTimeout // 清除单次定时器
3.元素事件
- 三种事件创建方法
// 直接绑定事件
// <input id="i1" type="button" onclick="Clicked(this)">
function Clicked(self){
// self为当前点击的标签
}
// 先获取Dom对象，然后进行绑定事件,函数不加()
// <input id="i1" type="button">
document.getElementById("id").onclick = fun;
document.getElementById("id").onfocus = function{
}
/*
冒泡事件：是指子元素向父元素传递的过程
捕获事件：是指父元素向子元素传递的过程
*/
// 冒泡或捕捉 flase为冒泡、true为捕捉
document.getElementById("id").addEventListener("click",function(){console.log("666");},flase);
- 计时事件
//3s定时器
setInterval(function(){
alert("Hello")
},3000);
//显示一个时钟
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
//停止执行定时器
clearInterval(myVar);
//3s后执行，只会执行一次
var myVar=setTimeout(function(){
alert("Hello")
},3000);
//清除上面
clearTimeout(myVar);
- 对话框
//警告框
alert("你好，我是一个警告框！");
//确认框
var r = confirm("你好，我是一个确认框！按下按钮");
if (r==true){
x="你按下了\"确定\"按钮!";
}else{
x="你按下了\"取消\"按钮!";
}
//输入框
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
4.其他对象模型
- windows对象
// window对象,表示浏览器窗口。
//document 也是 window 对象的属性之一
var doc = window.document.getElementById("body");
var w = screen.innerWidth; //浏览器内部的宽度(包括滚动条)
var w = screen.innerHeight; //浏览器内部的高度度(包括滚动条)
var w = screen.availWidth; //显示器屏幕的宽度
var w = screen.availHeight; //显示器屏幕的高度度
- location对象
var mhost = location.hostname; //返回 web 主机的域名
var mpath = location.pathname; //返回当前页面的路径和文件名
var mport = location.port; //返回 web 主机的端口 （80 或 443）
var mptcl = location.protocol; //返回所使用的 web 协议（http: 或 https:）
window.location.assign("https://www.baidu.com"); //加载新文档
- history对象
history.back(); // 与在浏览器点击后退按钮相同
history.forward(); // 与在浏览器中点击向前按钮相同
//例如 history.go(1) 表示前进一个页面,history.go(-1) 表示后退一个页面,history.go(-1),表示刷新页面
history.go(1); // go() 里面的参数表示跳转页面的个数
- navigator浏览器信息
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
JQuery
DOM/BOM/JavaScript的类库
$(document).ready(function(){ /* ... */});//在全部html文件加载后才会加载
1.选择器
- DOM <==> JQuery 转换
var dom_obj = jquery_obj[0];
var jquery_obj = $(dom_obj)
- 基本选择器
$('#id') // id选择器
$('.cl') // class选择器
$('a') // 标签选择器
$('a,.cl,#id') // 组合选择器
- 层级选择器
$('#id a') // 子子孙孙
$('#id>a') // 儿子
- 索引选择器
$("p:first") // 选择第一个元素
$("p:last") // 选择最后一个元素
$("p:eq(2)") // 选择第三个元素
- 属性选择器
$('[sjl]')
$("[sjl='123']")
$("input[type='text']")
$("input[type='text'][value='ok']")
$(':text') //选择 type="text" 的 <input> 元素
- 事件
$('input').click(function(){ ... })
$('input').each(function(k){ ... }) //循环每个元素,k为索引
2.筛选器
$(this).eq(1); // 索引
$(this).first(); // 第一个
$(this).last(); // 最后一个
$(this).hasClass(class); // 是否具有某个class
$(this).next(); // 下一个
$(this).nextAll(); // 下面所有的
$(this).nextUntil(); // 下一个直到..
$(this).prev(); //上一个
$(this).prevAll(); //上面所有的
$(this).prevUntil(); //上一个直到..
$(this).parent(); // 父标签
$(this).parents(); // 所有的父标签
$(this).parentUntil(); // 所有的父标签
$(this).children(); // 孩子标签
$(this).siblings(); // 兄弟标签
$(this).find('.content'); // 找到某个标签
3.文本操作
- 直接操作
$('#id').text(); // 获取文本
$('#id').html(); // 获取包括标签的文本
$('#id').val(); // 获取input文本
$('#id').text('666'); // 修改文本内容
$('#id').html('<a>666</a>'); // 修改标签
$('#id').val('666'); // 修改input文本
- 间接操作
$('#id').append("666"); //添加到标签内后
$('#id').prepend("666"); //添加到标签内前
$('#id').after("666"); //添加到标签外后
$('#id').before("666"); //添加到标签外前
$('#id').remove(); //移除标签和内容
$('#id').empty(); //移除包括标签和内容
$('#id').clone(); //复制包括标签和内容
4.样式操作
- class操作
$('#id').removeClass(); //移除class
$('#id').addClass(); //添加class
$('#id').toggleClass('cl'); //有cl就去掉，没有cl就加上
- css操作
$('#id').css('color','red'); //设置css值
var a = $('#id').css('font-size'); //获取css值
- 尺寸和操作
var m_width = $("#div1").width()
//其他操作按图同上
5.属性操作
- 自定义属性
var a = $('#id').attr('type'); //获取type的值
$('#id').attr('name','sjl'); //设置type的值
$('#id').removeAttr('value'); //删除某个属性
- 专用属性（checkbox，radio）
/*
:enabled
:disabled
:checked
:selected
*/
var a = $('input').prop('enabled'); // 得到某个属性
$('input').prop('enabled',true); // 设置input属性
$('#id').index('li'); // 传递一个选择器，返回#id在所有li中的做引位置
6.事件
- 鼠标事件
//单击点击事件
$("p").click(function(){
$(this).hide();
});
//双击点击事件
$("p").dblclick(function(){
$(this).hide();
});
//当鼠标指针穿过元素时的事件
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
//当鼠标指针离开元素时发生的事件。
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
//鼠标按键时发生的事件
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
//鼠标松开时发生的事件
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
//鼠标悬停
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
- 键盘事件
// 键盘按下，获取键盘按下具体按键代码
$(document).keydown(function(event){
$("span").text(event.keyCode);
// $("span").text(event.which);
});
// 键盘按下，不会触发所有的键，比如 ALT、CTRL、SHIFT、ESC
$(document).keypress(function(event){
$("span").text(event.keyCode);
// $("span").text(event.which);
});
// 键盘松开
$(document).keyup(function(event){
$("span").text(event.keyCode);
});
- 表单事件
//当元素获得焦点时
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
//当元素失去焦点时
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
//元素值改变事件，文本框按回车或点击框外才有效果
$("input").change(function(){
alert("文本已被修改");
});
//提交表单
$("form").submit(function(){
alert("提交");
});
- 文档/窗口事件
//浏览器窗口调整大小触发事件
$(window).resize(function(){
$('span').text(x+=1);
});
//鼠标滚动元素触发事件
$("div").scroll(function(){
$("span").text(x+=1);
});
//页面加载完触发事件
$(document).ready(function(){
alert("页面加载完成！")；
});
浙公网安备 33010602011771号