1.关于js
1)基本语法 输入输出 变量 数据类型 选择结构 循环结构 数组 对象
1)变量 和数据类型 运算符
var 变量 =值;//值是什么类型的值 变量就是什么类型
注意: var 还可以 省略
例如: var x=5; //x就是整数 var x=12.3; x就是float var x="哈喽";x就是字符串
2)输出 输入
a.输出: document.write("输出内容");
document.write("哈喽"); //会在页面输出哈喽
b.输入: prompt("提示信息","默认值，不写就为空"); 默认的返回值是字符串
例如: var v =prompt("请输入一个数",0); // 这个时候 v就默认会是 字符串 即使你输入的是整数，也会当成字符串
c.类型转换:
parseInt("字符串"); 将字符串 转 int
parseFloat("字符串");将字符串转 小数
注意:js里输出 换行 <br/>标签 实现 ，也就是说可以将标签直接写到 document.write(" "); 括号里
3)选择结构 与java一样
4)循环结构 与java一样
<script>
document.write("<h1>循环显示1-50之间能被5整除的数</h1>");
for(var i=1;i<=50;i++){
if(i%5==0){
document.write(i+",");
}
}
</script>
5)关于数组
var 数组名 = new Array(值1,值2,...);
数组名[索引] 来获取 数组元素
一个属性 length
两个方法 arr.push("爱奇艺"); sort() 方法
6)关于函数
a. 自定义函数 :
格式: function 函数名(参数列表){
//执行js代码
}
调用方式 : 函数名(参数列表); 直接调用
相应元素 onclick 事件 ，例如 点击 按钮 触发 函数
<input type="button" value="点一下" οnclick="函数名(参数列表)" />
b.匿名函数 ：没有名字的函数
格式: var 变量 = function (参数列表){
//执行js代码
}
或 元素的事件 = function (参数列表){
//执行js代码
}
一般这个函数用在页面 onload事件 或者元素 点击 事件里
2)内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
a.Date对象
getFullYear() 返回 Date 对象的年份，其值为4位数
getMonth() 返回 Date 对象的月份，其值介于0～11之间
getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours() 返回 Date 对象的小时数，其值介于0～23之间
getMinutes() 返回 Date 对象的分钟数，其值介于0～23之间
getSeconds() 返回 Date 对象的秒数，其值介于0～23之间
b. Math对象
floor() 对数进行下舍入 Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
random() 返回0~1之间的随机数 Math.random();例如：0.6273608814137365
3)定时器函数
1) setInterval(执行函数,每间隔时间以毫秒为单位); --重复执行
/* setInterval(function () {
alert('aaa');
},500);*/
结果是 每隔0.5秒 弹出aaa
清除定时器 clearInterval ()
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
2) setTimeout(执行函数,间隔时间以毫秒为单位); --执行1次
setTimeout(function () {
location.href='js5.html';//等待3秒调转页面
},3000);
清除定时器 clearTimeout()
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime);
4)使用js 操作BOM 浏览器对象模型（Browser Object Model）
a.window
常用方法 open() alert() prompt() confirm()
window.open("弹出窗口的url","窗口名称","窗口特征”)
window.open("http://www.baidu.com");在当前页面加载的同时 打开新页面
window.alert('弹一个看看!'); //消息框
// window.prompt("确定吗"); //输入框
window.confirm("确定要删除吗?"); //询问框
window.close(); 关闭当前页面
b.history
常用方法 forward() 下一个 前进
back() 上一个 后退
go() 替换前两个 ，括号里必须写数字 0表示当前页 正数表示 前进 负数表示后退
所有的方法 只有在先是实现跳转之后，才可用
c.location
常用方法 reload()
常用属性 href=""; 跳转到目标地址
<a href="location.href='http://www.baidu.com'">百度一下，你就知道</a>
方法: reload() 重新加载当前文档
replace() 用新的文档替换当前文档
<a href="javascript:location.reload()">刷新</a> <br/>
<a href="javascript:location.replace('http://www.baidu.com')">替换</a> <br/>
跟超链接一样能实现页面的跳转，但是原理不一样， 前者是同标签来实现 ，后者是用 js代码实现
d.document
属性: referrer 返回载入当前文档的URL
URL 返回当前文档的URL document.write(document.URL);
方法:
页面输出内容 document.write();
获取页面元素
按照ID获取 getElementById() 获取一个
按照名称获取 getElementsByName() 获取一个或多个
按照标签获取 getElementsByTagName() 获取一个或多个
按照类名获取 getElementsByClassName()获取一个或多个
除了按照id来获取 直接写之外，其他都需要 通过[索引]方式获取 ，即使只有一个也不例外
5) 使用js来操作DOM 同jqDOM操作
1.使用js操作dom
1)根据节点层次来访问节点(Element属性)
a.firstElementChild 第一个 孩子
b.lastElementChild 最后一个 孩子
c.nextElementSibling 下一个 兄弟
d.previousElementSibling 上一个 兄弟
----------------------------------------------
parentNode 父节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个子节点
previousSibling 上一个子节点
2) 更改 节点
a.更改节点 内容 innerHTML="内容";
b.更改 节点 样式 style.样式名="值";
c.更改节点 属性
--------------------------------------------------
2.关于jq
1.jQuery:
1)它是js的一个函数库
2)对js封装 ，使用的方法类似，但是更简洁
3)多了一个以.js后缀名文件
4) 版本 1x 2x 3 x 如果你浏览器 版本比较低 ，建议用1x
5)https://www.jquery123.com
2.使用jquery
1) 引入 jquery-1.12.4.js 文件
<script src="文件地址"></script>
2)获取元素 对它进行各种操作
选择器: 用来选取元素，规则与css样式操作类似，也能使用length来判断是否选取成功!
文档选择器
$(document) 用来获取 整个文档对象 它有一个方法 read(); 所有jQquery代码都写在这里
标签选择器
$('标签名') 用来获取 某个特定标签元素 相当于 js 的 document.getElementByTagName('标签名');
类选择器
$('.类名') 用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('类名');
ID选择器
$('#ID名') 用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('ID名');
一般情况下 三个选择器 常用事件 是click 或者悬浮的事件
3.操作步骤:
1）引入js文件 jquery-1.12.4.js
2) 编写文档就绪函数 $(选择器).方法（函数1); //所有的操作写到函数1
3) 在函数1里继续写页面元素的 操作事件
$('选择器').事件(函数2); 函数2 为元素事件触发的操作
例如 点击p元素弹出内容"123"
$('p').click(function(){ alert(123);});
4.常用的元素操作的方法:
1）操作文本
a.获取 text();
b.设置 text('设置的内容');
2)操作标签及文本
a.获取 html();
b.设置 html(需要设置的标签及里面的内容);
3)操作 样式
a. 单个样式 css("样式名","样式值");
b.多个样式 css({样式名:样式值,样式名:样式值});
c.可以连缀操作样式
4)操作属性
a. 单个属性 attr("属性名","属性值");
b. 多个属性 attr({属性名:属性值,属性名:属性值});
5.整理所有选择器使用:
1)基本 选择器
标签选择器
$('标签名') 用来获取 某个特定标签元素 相当于 js 的 document.getElementByTagName('标签名');
类选择器
$('.类名') 用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('类名');
ID选择器
$('#ID名') 用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('ID名');
补充2个
并集选择器
$('选择器1，选择器2,..') 用来选取多个元素同时进行操作
全局选择器
$('*') 选取所有元素
2)属性选择器
a. 包含 属性 [属性名] 例如: 选取所有class属性的元素 $('[class]')
b. 属性等于 值 [属性=值] 例如: 选取class属性为 asv的 元素 $('[class=asv]')
c. 属性以 值开头 [属性^=值] 例如: 选取class属性以 a 开头的 元素 $('[class^=a]')
d. 属性以 值开头 [属性$=值] 例如: 选取class属性以 a 结尾的 元素 $('[class$=a]')
e. 属性以 值开头 [属性*=值] 例如: 选取class属性包含a 的 元素 $('[class*=a]')
f.还有一个属性不等于值 慎用
3)过滤选择器
//$('li:first').css({"color":"red","font-size":"36px"}); //第一个li
//$('li:last').css({"color":"red","font-size":"36px"}); //最后一个li
// $('li:even').css({"color":"red","font-size":"36px"}); //偶数元素 第一个索引 是 0 所以 它是偶数开始
//$('li:odd').css({"color":"red","font-size":"36px"}); //奇数元素 第一个索引 是 0 所以 它是偶数开始
// $('li:eq(2)').css({"color":"red","font-size":"36px"}); //索引值的元素 第一个索引 是 0 所以 如果想选第3个元素 应该是2
// $('li:gt(2)').css({"color":"red","font-size":"36px"}); //值大于索引的元素 第一个索引 是 0
//$('li:lt(2)').css({"color":"red","font-size":"36px"}); //值小于索引的元素 第一个索引 是 0
//:last 选最后一个 :not() 括号里是什么 就是除了这个一个以外 所有的
$('li:not(:last)').css({"color":"red","font-size":"36px"}); //值小于索引的元素 第一个索引 是 0
4)层次选择器
a.后代选择器 $('#u p').addClass('bg');//选取id为u 的后代元素p
b.子选择器 $('#u>p').addClass('bg');//选取id为u 的子元素p
c.相邻元素选择器 $('#u+p').addClass('bg');//相邻元素选择器
d.同辈元素选择器 $('#u~p').addClass('bg');//同辈元素选择器
3.事件
文档就绪事件
$(document).ready(function(){
//做的事
});
1)单击事件 click
$('选择器').click(function(){
点击后执行的操作;
});
2)鼠标悬浮 移除时间
$('选择器').mouseover(function(){
鼠标悬浮后执行的操作;
});
$('选择器').mouseout(function(){
鼠标移走后执行的操作;
});
3)hover事件 模拟 鼠标 悬浮 和移除事件
$('选择器').hover(function () {
鼠标悬浮后执行的操作;
}, function () {
鼠标移走后执行的操作;
});
hover 的括号内，有且只有2个函数
4)toggle事件 模拟 鼠标连续点击
$('选择器').toggle(function () {
第一次点击后执行的操作;
}, function () {
第2次点击后执行的操作;
}, function () {
第3次点击后执行的操作;
});
toggle的括号内，可以有n个函数
5)toggleClass('样式名'); 切换 样式 点一下 添加样式 ，再点移除样式
相当于 addClass('样式1'); removeClass('样式1');两个的结合
<style>
.psty{
background-color:pink;
width:300px;
height:100px;
}
</style>
$('span').click(function () {
// $('p').css({"background":"pink","width":"300px","height":"100px"});
// $('p').addClass('psty'); //追加样式 removeClass(); 移除样式
$('p').toggleClass('psty');
});
4.动画
1)显示与隐藏
显示 show(动画持续时间，动画执行完毕后调用函数) 一般只有第一个参数 可以用单词 fast 200 normal 400 slow 600
隐藏 hide(动画持续时间，动画执行完毕后调用函数)
2)淡入淡出
淡入 fadeIn(3000);
淡出 fadeOut();
3) 折叠与展开
折叠 .slideUp(1000);
展开 .slideDown(3000);
4) 自定义:
$(selector). animate({params},speed,callback)
$(".man").animate({"bottom":"0px"});
5.jq操作DOM
那 与 js操作DOM有什么区别呢? jQuery对JavaScript中的DOM操作进行了封装
1)样式操作
a.设置和获取样式
设置 css(name,value) ; 或 css({name:value, name:value,name:value…}) ;
获取 css(name)
$(document).ready(function () {
$('div').css("background-color","red");//设置单个样式
$('div').css({"height":"80","width":"200"});//设置多个样式
alert( $('div').css('background-color') );//获取样式
});
b.追加和移除样式
追加
$(selector).addClass(class);或 $(selector).addClass(class1 class2 … classN);
$("h2").mouseover(function() {
$("p").addClass("content border");
});
移除
$(selector).removeClass("class") ;或 $(selector).removeClass("class1 class2 … classN ") ;
$("h2").mouseout(function() {
$("p").removeClass("text content");
});
c.切换样式( 透明度样式设置 opacity:0 )
$(selector).toggleClass(class) ;
$("h2").click(function() {
$("p").toggleClass("content border");
2)内容及Value值操作
a. $("div.left").html();
或
$("div.left").html("<div class='content'>…</div>");
b. val()可以获取或设置元素的value属性值
$(this).val(); 获取元素的value属性值
$(this).val(value); 设置元素的value属性值
3)节点操作
查找节点（前面章节已讲） $('p')：通过选择器获取 p标签 节点 $('#aa')：通过选择器获取ID为aa的元素 节点
创建节点 $('节点名')
$("<li></li>"); $("<p></p>"); $("<h2</h2>");
插入节点
append(节点变量) 谁到我这来 ,我就是参考 谁 就是创建 的那个 节点
例如 : 创建一个p标签 ，追加到已有div里
a. var p= $("<p></p>");
b. $('div').append(p);
删除节点
remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据
替换节点
replaceWith()和replaceAll()用于替换某个节点
$("<li>aaa</li>");
$(".gameList li:eq(2)").replaceWith(v);
复制节点
$('span').click(function () {
alert('弹出内容 ');
});
$('.up').click(function () {
var v = $('span').clone(true );
$('h2').append(v);
});
4)节点属性操作
a. attr("属性名") 用来获取 元素属性
b. attr("属性名","值") 用来 设置元素属性
c. removeAttr("属性名")用来删除元素的属性
5)节点遍历
a.遍历子元素 children()方法可以用来获取元素的所有子元素
var $section =$("section").children();
alert($section.length);
b.遍历同辈元素 next( )、prev( )、siblings( )
下一个: $("li:eq(1)").next().addClass("orange");
上一个: $("li:eq(1)").prev().addClass("orange");
前后所有的: $("li:eq(1)").siblings().addClass("orange");
c.遍历前辈元素 parent( )、parents( )
parent()：获取元素的父级元素
$("li:eq(1)").parent().addClass("orange");
其他遍历方法 each( ) 、end( )、find( )、eq( )、first( )…
d.CSS-DOM操作
6.表单验证
1)为什么?
减轻服务器的压力 --非空
保证输入的数据符合要求--验证格式
2)使用h5验证表单
a.验证非空 required 如果要给值 required="required"
b.格式验证 pattern=" 正则表达式 "
c.默认给出提示 placeholder="提示消息"
扫一扫
03-13
3344
3344
01-05
843
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
