JAVA SCRIPT 学习笔记

最新推荐文章于 2023-05-24 20:46:19 发布

小丶灰辉

最新推荐文章于 2023-05-24 20:46:19 发布

阅读量586

点赞数

文章标签： java 学习 javascript

本文链接：https://blog.youkuaiyun.com/qq_41305159/article/details/123291671

版权

第一章       JavaScript基础
   为什么要学习JavaScript？
       1、减轻服务器的压力，实现表单验证
       2、可以制作网页的特效
   什么是JavaScript？
       他是一种基于对象和事件驱动的一门语言，具有较高的安全性
   特点：1、给HTML添加交互
   2、解释性语言，边执行，边解释
   3、网页的脚本语言，语法和Java类似
JavaScript内容的分类：
   ECMAScriptt：JavaScript的基本语法
   DOM:   文档对象模型
   BOM:   浏览器对象模型
JavaScript的基本语法以及引入方式：
   1、内部脚本
       <script type="text/javascript">
      alert("你好，JavaScript")
       </script>
   2、外部脚本
   <script type="text/javascript" src="js/demo1.js"></script>
   3、行内脚本
       需要事件触发
   <button onclick =“javascript：alert('行内js')">触发按钮</button>
   onclick：点击事件   alert：弹窗
注意：一般js可以放在任何地方，但是确保在使用时网页标签已经加载完毕，建议一般放在网页最后
JavaScript的执行原理：
   1、发送请求地址
   2、服务器响应请求并携带js文件到客户端
   3、客户端进行解析，显示效果
变量：
   1、先声明，再赋值
   var i； i=10；
   2、声明并赋值
   var i=10；
   注意：var是js中所有数据的声明
数据类型：
   undefined：只声明，不赋值   例如：var i；
   null：赋值为null       例如：var i=null；
   number：数值类型，包含小数和整数
   boolean：true和flase
   string：字符串类型
js输出语句：
   document.write()；特点：能够识别网页的标签

alert(l.length);//获取字符串的长度
alert(l.charAt(1));//根据下标获取对应的字符
alert(l.indexOf("好"));//根据提供的字符来获取下标，找不到值为-1*/
alert(l.substring(0,2));//截取字符串，取前面下标的前一个，取前不取后
var str= l.split("1");//通过你给的字符将数据分割为数组

数组：
   var arr=new Array(5);//声明长度
   var arr=new Array(1，2，3，4，5);//直接赋值
   注意：也是通过arr[0]取值；
   数组名.length：返回数组的长度
   var.join() ：将数组通过一个字符转换为字符串
   数组名.sort() :根据首字母进行排序，按照小到大进行排序
   数组名.push() :在最后添加数据，成为新的数组

数值转换函数：
alert(parseInt(k));//将字符转换为整型，从开头只识别整数
alert(parseFloat(k));//将字符转换为浮点型，从开头只识别浮点型
//如果说开头不是小数或者整数，就得到NaN,非数值
isNAN(字符串)：如果字符串是非数值，返回true 不是数值返回flase

   //判断用户输入的是否是数字，否则继续输入
自定义函数：
   触发函数：通过事件触发
       <button οnclick="函数名（‘你好’）"></button>
   声明函数：
       function 函数名（n）{//执行的任务
           alert（n）；
           return 值；
           }
   传递参数：
       1、触发事件中传递一个值 "你好"
       2、在声明函数括号里写一个变量，直接就可以使用

JavaScript第二章
JavaScript操作BOM对象
BOM（Browser Object Mobel）对象：浏览器对象模型可以操控浏览器

window对象，BOM对象的核心
history：浏览器历史对象
location：浏览器的目标对象
document：浏览器的文档对象

window对象的常用方法
   window.alert（）：弹窗
   window.prompt（）：输入框
   window.confirm（）：确认框
   window.open（”链接地址“，”名称“，”窗口的属性“）：打开页面
   window.close（）：关闭窗口
   window.setTimeout():延时函数
   window.setInterval():定时函数
history对象的常用方法
   history.back（）；       后退
   history.forward（）；   前进
   history.go（值）；   0代表当前，-1代表后退 1代表前进
location对象的常用属性和方法
   location.hostname；获取主机名和端口号
   location.host；   获取主机名
   location.href；   获取当前页面的地址
   注意：以上三种属性可以进行修改
       例如：location.href="http://4399.com"   修改页面地址
   location.reload（）；重新加载本页面
   location.replace("替换的地址")   重新替换地址栏
document对象的属性和方法
   document.referrer   加载上一个页面的地址栏
   document.URL   加载当前的地址栏
<p id="p1"name="n1">这是p标签</p>
<p name="n1">哈哈哈</p>
document.getElementById("p1")    根据id属性并且值为p1的获取元素
document.getElementsByName("n1")
   根据name属性并且值为n1获取元素数组
   取值：通过下标取值 names[0].innerHTML

document.getElementsByTagName("p")
根据标签并且标签为p标签获取元素数组
取值：通过下标取值 ps[0].innerHTML

Date对象：
   1、创建一个Date对象
       var times=new Date();
   2、调用方法获取数据
   times.getDate()     获得一个月中的几号
   times.getDay()   获得一个星期的第几天
   times.getHours   获得小时
   times.getMinutes()   获得分钟
   times.getSeconds()   获得秒
   times.getFullYear()   获得年份
   times.getMonth()+1获得月份
   times.getTime()   获得时间戳从1970年一月一日开始计毫秒
例如：
   var year=times.getFullYear();       //年
    var yue=times.getMonth()+1;   //月
   var date=times.getDate();       //日
document.write("当前的时间是："+year+"年"+yue+"月"+date+"日")

Math（数学对象）：
   不需要创建对象
   document.write(Math.ceil(3.9));   向上取整   结果为4
   document.write(Math.floor(3.9));   向下取整   结果为3
   document.write(Math.round(3.9)   四舍五入   结果为4
   Math.random()           随机数范围（0~1) 例如：Math.random()*10 0<结果<10
   例如利用随机数取1~10: Math.floor(Math.random()*10+1)
时间函数：
   setTimeout("调用的函数",等待时间)   延时函数等待多少秒执行执行一次
   例如：setTimeout（function(){
       //执行的代码
       }，1000）   1000毫秒=1秒

   setInterval("调用的函数",定时时间)   定时函数每隔多少秒执行无数次
   例如：setInterval（function(){
       //执行的代码
       }，1000）   1000毫秒=1秒

第三章
获取ul标签的父节点的标签名
var fa=document.getElementsByTagName("ul")[0].parentNode.nodeName;
alert(fa);

返回子节点的集合,会把空格当做子节点一起获取
空格是文本节点
var arr=document.getElementsByTagName("ul")[0].childNodes;
alert(arr[0].nodeName);

firstChild获取的第一个子节点
var str=document.getElementsByTagName("ul")[0].firstChild.innerHTML;
alert(str);

lastChild获取最后一个子节点
var str=document.getElementsByTagName("ul")[0].lastChild.innerHTML;
alert(str);

nextSibling获取当前节点的下一个节点
var str=document.getElementsByTagName("ul")[0].firstChild;
alert(str.nextSibling.innerHTML);

previousSibling获取当前节点的上一个节点
var str=document.getElementsByTagName("ul")[0].lastChild;
alert(str.previousSibling.innerHTML);

parentNode获取父节点
childNodes获取子节点集合(数组)
返回子节点的集合,会把空格当做子节点一起，获取空格是文本节点
firstChild获取的第一个子节点
lastChild获取最后一个子节点
nextSibling获取当前节点的下一个节点
previousSibling获取当前节点的上一个节点

firstElementChild获取的第一个子节点
lastElementChild获取最后一个子节点
nextElementSibling获取当前节点的下一个节点
previousElementSibling获取当前节点的上一个节点

nodeName获取标签名
nodeValue获取节点值
nodeType节点类型数字
类型 nodeType值
元素(标签) 1
属性attr 2
文本text(空格) 3
注释comments 8
文档document 9

元素.setAttribute（属性，值）给标签设置属性和值
元素.getAttribute（属性）   根据属性获取元素的属性值
createElement("标签名")   创建标签元素节点；
   document.getElementById("p1").   appendChild(hr);将hr插入到p1末尾
   body[0].insertBefore(hr,p1)         将hr插入到p1里面的最前面
   爷爷辈.insertBefore(子级,父级)
创建节点           createElement("标签名");
将节点追加至最后       父级..appendChild(追加的节点);
将节点追加值之前       父级.insertBefore(newimg,btn);
克隆复制节点       cloneNode(节点);
删除节点           父级.removeChild(p1)；
替换节点           父级.replaceChild(新节点,旧节点);

给元素添加样式获取的元素.style.属性="属性值"
document.getElementById("p1").style.color="pink";

给元素添加整套样式获取的元素.className="类样式名称"；

触发事件：
   onclick:       点击事件
   onmousemove:   鼠标移上去
   onmouseover:   鼠标移上去
   onmouseout：   鼠标移走
   onmousedown：   鼠标摁下去

   第四章   初识jQuery
什么是jQuery？
   jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装；
jQuery能做什么？
   访问和操作DOM元素
   控制页面样式
   对页面事件进行处理
   扩展新的jQuery插件
   与Ajax技术完美结合
jQuery的优势
   体积小，压缩后只有100KB左右
   强大的选择器
   出色的DOM封装
   可靠的事件处理机制
   出色的浏览器兼容性
   使用隐式迭代简化编程
   丰富的插件支持
引入jQuery
   <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
jQuery的基本结构
   $(document).ready(function(){
       此处写代码
           })
   简化后（常用的方式）：
       $(function(){
       此处写代码
       $(选择器).jquery方法
           })
   $:代表jQuery对象   document:代表当前文档   ready（）：文档加载时
给元素添加样式：
   $(选择器).addClass()   添加一整套样式
   $(选择器).css()   直接添加样式
       添加一个样式：$(选择器).css("属性","属性值");
       添加多个样式：$(选择器).css({"属性1":"属性值1","属性2":"属性2".......})
   $(选择器).show()   显示元素
   $(选择器).hide()   隐藏元素

DOM对象：
   相当于使用获取节点的方式得到的对象，成为原生js对象
   var idname=document.getElementById("#id");
Jquery:   相当于使用工厂函数获取的对象，称为Jquery对象
   $("#id")
DOM对象转化为jQuery对象
   前提是必须要获取DOM对象，才能进行转化
   var $ Jquery对象=$(DOM对象);
jQuery对象转化为DOM对象：
   前提是必须要获取jQuery对象，才能进行转换
   var DOM对象=$jQuery对象[下标]

       第五章   jquery选择器
什么是jQuery选择器：
       能够选择网页上的所有元素，跟css选择器类似
jquery选择器的优势：
       1、相比于JavaScript节点获取元素，更容易控制元素
       2、内部添加了特有的选择器，如奇数，偶数选择器
       3、更简单，更容易理解
基本选择器
   标签   id   类
   并集选择器   $("h1,p,li")
   q全局选择器   $("*")
层次选择器
   后代选择器   $("ul li")
   子代选择器   $("ul>li")\
   相邻兄弟选择器   $("ul+p")   选择ul后面的第一个兄弟元素p
   通用兄弟选择器   $("ul~p")   选择ul后面的所有兄弟元素p
伪类选择器
   选择第一个元素   $("li:first-of-type")
   选择最后一个元素   $("li:last-of-type")
   选择第几个元素   $("li:nth-of-type")
属性选择器
   选择具有id属性的元素       $("a[id]")
   选择具有id属性并且值为d1的元素    $("a[id='d1']")
   选择具有id属性并且值为d1开头的元素    $("a[id^='d1']")
   选择具有id属性并且值为d1结尾的元素    $("a[id$='d1']")
   选择具有id属性并且值包括d1的元素    $("a[id*='d1']")
   选择具有id属性并且值不等于d1的元素    $("a[id!='d1']")
过滤选择器
   选择第一个元素       $("li:first")
   选择最后一个元素       $("li:last")
   除了选择器以外的所有元素   $("li:not(li[第几个])")
   选择第几个元素(根据下标查找)   $("li:eq(2)")
   选择偶数下标元素       $("li:even")
   选择奇数下标元素       $("li:odd")
   选择大于下标的元素       $("li:gt(2)")
   选择大于下标的元素       $("li:lt(2)")
可见性过滤选择器
   选择所有隐藏的元素       $("ul>li:hidden")
   选择所有显示的元素       $("ul>li:visible")

   选择标题元素       $(":header")
   选择获取焦点元素       $(":foucus")
   选择动画元素       $(":animated")

特殊符号的转义：
   如果选择器中有特殊符号，需要用反斜杠进行转移   \\
   例如：   <p id="p1#a"><p>
       $("#p1\\#a")   加反斜杠进行符号转义

       第六章   jQuery事件与动画
什么是事件？
   事件是指用户对文档进行访问的一种交互性行为。
鼠标事件
   click()       鼠标单击元素时
   mousemove()   鼠标移入元素时
   mouseout()   鼠标移出元素时
   mouseenter()   鼠标进入元素时
   mouseleave()   鼠标离开元素时
注意：鼠标移入和进入的区别
   mousemove()移入：只要在元素内移动就会触发
   mouseenter() 进入：只要在元素内，不管怎么移动只会触发一次
键盘事件：
   keydown()   键盘按键按下时
   keyup()       键盘按键释放时
   keypress()   键盘可打印字符按下时除功能键以外
   $(document).keydown(function(key) 直接获取按键的对象 key就是按键对象
   key.keyCode       获取键盘上的ascll码值
窗口事件
   指窗口发生大小改变时触发
   $(window).resize(function(){
alert("调整了窗口")
})
事件绑定
   $("div").bind("事件名"，function(){})   单个绑定
   $("div").bind({
   事件名：function(){},事件名2：function(){}......
   })
解除绑定
   $("div").unbind("事件1"）   解绑单个事件
   $("div").unbind()；       事件全部失效
复合事件
   $("button").hover（鼠标进入，鼠标离开）
   $("button").hover(function(){},function(){});
   $("button").toggle(函数1，函数2.....)   鼠标连续点击时触发
   $("button").toggle(function(){},function(){}.....)
   $("p").toggleClass("类样式名") 添加或移出整个类样式
   $("p").toggleClass("test")
动画
   显示和隐藏
显示
   show("过渡时间","function(){}") 等待显示完后，执行后面的函数
   show("过渡时间","函数名")    时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
隐藏
   hide("过渡时间","function(){}") 等待显示完后，执行后面的函数
   hide("过渡时间","函数名")     时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
淡入淡出效果
淡入
   fadeIn("过渡时间","function(){}") 等待显示完后，执行后面的函数
   fadeIn("过渡时间","函数名")    时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
淡出
   fadeOut("过渡时间","function(){}") 等待显示完后，执行后面的函数
   fadeOut("过渡时间","函数名")    时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
延伸和缩短
延伸
   slideDown("过渡时间","function(){}") 等待显示完后，执行后面的函数
   slideDown("过渡时间","函数名")    时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
缩短

   slideUp("过渡时间","function(){}") 等待显示完后，执行后面的函数
   slideUp("过渡时间","函数名")    时间可以为毫秒，也可以为slow 慢 normal 默认 fast 快
       function 函数名(){}   可执行外部函数
动画特效
   animate({属性：属性值，属性：属性值}，动画时间，function(){})
   animate({属性：属性值，属性：属性值}，动画时间，函数名{})
   function 函数名(){}   可执行外部函数

       第七章   使用jQuery操作DOM节点
DOM的分类：
   DOM core   指所有支持DOM的功能都可以进行使用操作
   HTML DOM   网页中的所有标签或节点
   CSS DOM       指网页中的CSS美化样式
在控制台输出信息
   console.log("元素的宽为："+w);
设置和获取样式
   $(选择器).css("属性","属性值")               设置单个样式
   $(选择器).css({"属性"："属性值1"，"属性"："属性值2"})   设置多个样式
   $(选择器).css("属性")                   获取指定属性值
添加类样式
   $(选择器).addClass("类名")       添加单个类样式
   $(选择器).addClass("类名1 类名2")   添加多个类样式
移除类样式
   $(选择器).removeClass("类名")       移除单个样式
   $(选择器).removeClass("类名1 类名2")   移除多个样式
添加和移除样式
   $(选择器).toggleClass("a")       指元素在添加样式和移除样式中切换
   $(选择器).toggleClass("类名1 类名2")   来回添加和移除多个样式
判断元素是否含有类样式为
   $(选择器).hasclass("类名");       如果有类名，则返回true 否则返回false
HTML代码操作
   $(选择器).html();       获取选择器的内容（文本标签）
   $(选择器).html("内容");   将元素内容进行替换（文本标签）
   $(选择器).text();       获取选择器的内容（文本）
   $(选择器).text();       将元素内容进行替换（文本）
   $("#val").val(）;       获取表单value值
   $("#val").val("内容")       替换表单value的值
   $("#val").attr("属性","属性值")   设置属性值

节点的创建和插入
   var $newcon=$("创建的内容");       创建节点(可以是标签，可以是文本)
   $("ul").append($newcon);       将新节点插入到ul内的最后面
   $newcon.appendTo("ul");       同上
   $("ul").prepend($newcon)       将新节点插入到ul内的最前面
   $newcon.prependTo($("ul"))       同上
同辈插入：
    $("ul").after($p);           将p元素插入到ul之后
   $p.insertAfter($("ul"));       同上
   $("ul").before($p)           将p元素插入到ul之前
   $p.insertBefore("ul");       同上
节点的删除和替换
   $(选择器).remove();       删除当前选择的节点
   $(选择器).empty();       清空当前选择的节点内容(文本和标签)
   $(选择器).detach();       删除当前节点，但是可以保留删除的节点
   $(选择器).replaceWith(新节点);   选择的内容被新节点替换
   新节点.replaceAll($(选择器));       新节点替换选择器选择的内容

复制节点
   $(选择器).clone();           复制当前选择的节点
                   true复制节点的事件   false不复制事件
属性节点操作
   设置和获取属性节点
   $(选择器).removeAttter("属性名");   移除指定的属性节点
遍历节点
   $(选择器).children();           获取所有的子节点，但是不会获取后代其他节点
                   得到一个子节点数组，数组取值为DOM对象不能使用jQuery方法
   $(选择器).next()           选中当前元素的下一个兄弟元素
   $(选择器).prev()           选中当前元素的上一个兄弟元素
   $(选择器).siblings()           选中当前元素的所有兄弟元素
访问父级和祖先元素
   $(选择器).parent();           选择当前元素的祖先元素
   $(选择器).parents();           选择当前元素的祖先元素，得到一个数组，通过下标进行取值
                   需要转为jQuery对象才能使用jQuery方法 $(arr[index])
   $(选择器).each(function(index,element){});获取页面上的所有当前选择元素，进行遍历，
                   index是小标，element代表当前元素；
   $(选择器).end();           结束当前的筛选，从最近的一次筛选换开始选择

       第八章   表单验证
为什么需要表单验证
   1、减轻服务器的压力
   2、保证数据的完整性、有效性。
表单校验的步骤：
   1、获取表单元素输入的值
   2、对表单数据进行判断处理
   3、使用事件对数据进行提交处理
表单选择器：
   $(":input")   选中所有input元素
   $(":text")       选中所有的文本框
   $("password")   选中所有的密码框
   $(":radio")   选中所有的单选按钮
   $("checkbox")   选中所有的复选框
   $(":file")       选中所有的文件域
   $(":image")   选中所有的图片按钮
   $("button")   选中所有普通按钮
   $("submit")   选中所有的提交按钮
   $("email")       选中所有的邮箱
   $("hidden")   选中所有的隐藏元素
   $("reset")       选中所有的重置按钮
表单属性过滤选择器，
   $("habled")   选中所有可用元素
   $("disavled")   选择所有不可用元素
   $("checked")   选中所有单选、复选中被选过的元素
   $("selected")   选中下拉列表被选中的元素
获取和失去焦点事件：
   事件：onfocus   获取焦点
   onblur   失去焦点
   方法(jQuery):
   focus()   获取焦点的方法
   blur()   失去焦点的方法
   select()   选择列表时的方法
正则表达式：
   1、代码简洁
   2、对输入的格式验证更严谨，更加安全

/.../规则的开始和结束
^ 表达式的开始
$ 表达式的结束
\s 匹配空白字符比如 (换行、空格)
\S 匹配非空白字符
\d 匹配一个数字（0-9）
\D 匹配一个非数字
\w 匹配数字，字母下划线[A_Za_z0_9_]
\W 匹配除了数字字母下划线[A_Za_z0_9_]
. 匹配除了换行符其他的符号
{n} 匹配n次规定写几个从前往后开始匹配
{n，} 至少要匹配n次多次（上不封顶）
{n,m} 至少要匹配n次最多不超过m次数量在n到m之间
* 至少要匹配0次多次（上不封顶）
? 至少要匹配0次最多1次
[] 可选项

HTML5新验证属性：
   required       非空验证
   placeholder   表单提示性文字
   pattern       正则表达式   例如：pattern=“\d”；
判断验证结果（js方法）：
   元素.validity.valueMissing   接收非空判断结果   注意：只能判断设置了required属性
   元素.validity.typeMismatch   接收新元素验证结果只能验证的类型：url number email 等
   元素validity.patternMismatch   接收正则表达式验证结果注意：设置了pattern=“属性”
   元素.validity.tooLong   长度不规范时验证结果注意：设置maxlength=“属性”
   元素.validity.rangeOverflow   不符合最小值验证结果注意：设置了min=“属性"
   元素.validity.rangeUnderflow   不符合最小值验证结果注意：设置了max=“属性"
设置提示信息：
   元素.setCustomValidity（”提示信息“）；
   元素.setCustomValidity（”“）清空提示信息