alert(); 页面弹窗

<input plactholder="请输入密码"/>(隐藏字体效果)
js对数据类型不敏感,与Java相似
1.js变量定义符:var
2.js数据类型:
number string bollean undefind 引用数据类型
typeod 查看数据类型
3.js的函数有两种定义方式
①普通函数语法:
function 函数名称(){
js功能逻辑代码
}
②匿名函数语法:优点:节省命名空间
(var 函数名称 = )function(参数列表){
js功能逻辑代码
}
4.js事件
onclick 鼠标点击触发事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件--注意事件源是表单form
ondblclick 鼠标双击某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmousemove 鼠标移动
5.js的BOM对象
①screen对象,screen对象中存放着有关显示浏览器屏幕的信息
②window对象,window对象表示一个浏览器窗口或一个框架
1)弹框的方法
提示框 alert(提示信息)
确认框 comfirm(确认信息) 返回值(true,false)
输入框 prompt(输入信息)
2)定时器
执行多次的定时器:setInterval
执行一次的定时器:setTimeout(函数,毫秒值)
清除定时器:(执行多次清除)clearInterval(函数)
清除定时器:(执行一次清除)clearTimeout(函数)
3)全局方法(常用的几个)
parseInt/parseFloat函数(字符格式转换)
eval函数---特点:可以将字符串解析成js脚本
window.onload 页面加载完毕事件
document.getElementById() 获取页面中相应的文档id,方便修改信息
③navigator对象,包含的属性描述了正在使用的浏览器
④history对象,是用来保存浏览器历史纪录信息
⑤location对象,location对象是window对象的一部分,可通过window.location属性来访问。
location.href="网址"; 相当于自动在浏览器中输入网址并跳转
6.js的DOM的操作方法
(1)标签元素的操作
①获得元素对象:
根据id获得一个元素:getElementBy(id属性值)
根据标签名称获得多个元素:getElementsByTagName(标签名称)
根据class属性获得多个元素:getElementsByClassName(class的属性值)
根据name属性获得多个元素:getElementsByName(name属性值)
②创建一个新元素 createElement()
③将元素放到某个父元素的内部appendChild()
④标签体的获取与设置:innerHTML
(2)属性的操作
获得属性的值:getAtrribute(name)
设置添加属性的值:setAtrribute(name,value)
删除某个属性:removeAtrribute(name)
获得元素父节点: parentElement parentNode
删除元素子节点: removeChile(元素)
查看元素是否有子节点: hasChildNodes(元素)
剪切节点替换: 父节点.replaceChild(要替换节点,被替换节点);
添加子节点: appendChild(子节点);
创建节点: createElement("标签名称")
节点插入: 父节点.insertBefore(插入,被插入)
父节点.insertAfter(插入,被插入)
7.Date 函数
8.Map 函数
9.RegExp 正则表达式
-------------------------------------------------
jQuery
10.jQuery对象与js对象之间的转换
js对象转成jQuery对象,语法:$(js对象)
jQuery对象转换成js对象,语法: jQuery对象[索引]或jQuery对象.get(索引)
11.事件的写法不同,意义相同
js的事件的写法:js对象.onclick = function(){}
jQuery的事件的写法:jQuery对象.click(function(){})
12.js的页面加载完毕与jQuery的页面加载完毕
js的页面加载完毕:window.onload = function(){}
jQuery的页面加载完毕:$(document).ready(function(){})
两者区别:
a)jQuery的页面加载完毕有简写形式:$(function(){})
b)jQuery的页面加载完毕事件可以写多次,而js只能写一次,写多次也只会执行一次。
13.基本选择器
标签选择器(元素选择器): $("html标签名")
id选择器:$("#id的属性值")
类选择器:$(".class的属性值")
14.层级选择器
获得A元素内部的所有B元素:$("A B")
获得A元素下面的所有的B子元素(孙子就不行):$("A>B")
获得A元素同级下一个B元素:$("A+B")
获得A元素同级所有后面B元素:$("A~B")
15.属性选择器
获得有属性名的元素:$("A[属性名]")
获得属性名 等于 值 元素:$("A[属性名=值]")
获得属性名 不等于 值 元素:$("A[属性名!=值]")
获得属性名 以 值 开头 元素:$("A[属性名^=值]")
获得属性名 以 值 结尾 元素:$("A[属性名$=值]")
获得属性名 含有 值 元素 元素:$("A[属性名*=值]")
复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值][属性名!=值]")
16.基本过滤选择器
获得选择的元素中的第一个元素: :first
获得选择的元素中的最后一个元素: :last
不包括指定内容的元素例如: :not(selecter)
偶数,从0开始计数: :even
奇数,从0开始计数: :odd
指定第几个: :eq(index)
大于n个: :gt(index)
小于n个: :lt(index)
获得标题(<h1>/<h2>...):header ---固定写法
获得动画: :animated ---固定写法 正在执行的动画
17.表单属性选择器
可用: :enabled
不可用: :disabled
选中(单选radio,多选checkbox): :checked
选择(下列列表<select>): :selected
18.jQuery的DOM操作方法
①HTML代码/文本/值/属性:html()/test()/val()
html text val 传递参数代表赋值 空参代表获取
②HTML属性操作:attr()/prop()
attr()===setAtrribute和getAttribute
attr(属性名称);---获取属性的值
attr(属性名称,属性值);---设置属性的值

③HTML的class属性操作:addClass() removeClass()
addClass(值)===attr("class",值)
removeClass(class值)===removeAttr("class值")
④HTML的样式操作:css()
css()===js对象.style.属性
css(css属性名) 获取css属性名称对应值
scc(css属性名,值) 设置css样式
⑤HTML的元素的创建:$("标签")
$("<li></li>")===createElement("li")
⑥HTML的内部插入:append() prepend()
append()===appendChild
prepend() 加入所有子元素的最前面
⑦HTML元素的删除操作:remove()
注意:jQuery中的大部分方法是集设置值与获取值为一体的
定义变量时 使用var 则该变量属于函数私有
不写var 则该变量属于全局的
19.jQuery的效果
①元素的显示与隐藏
show(speed,fn)显示
参数 speed,显示速度,单位:毫秒。固定字符串:slow,normal,or fast
参数 fn,显示成功之后回调函数。
hide() 隐藏
fadeIn() 显示。
fadeOut() 隐藏。
fadeToggle() 切换
slideUp() 滑出
slideOut() 滑走
20.js页面的编码方法
encodeURL() : 编码
decodeURL() : 解码
21.jquery中常用的事件
jQuery的事件与js的事件的功能和意义一样,只是在使用语法上稍微有些差异
blur([[data],fn]) 失去焦点事件
change([[data],fn]) 域内容变化
click([[data],fn]) 点击事件
dblclick([[data],fn]) 双击事件
focus([[data],fn]) 获得焦点事件
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
scroll([[data],fn]) 滚动事件
submit([[data],fn]) 提交事件
22.事件的绑定:jQuery对象.bind(事件类型,相应函数);
例如:
绑定一个事件:
$("btn").bind("click",function(){
alert();
});
绑定多个事件:
$("button").bind({
click:function(){alert()},
mouseover:function(){alert()},
mouseout:function(){alert()}
});
事件的解绑:jQuery对象.unbind([事件类型]);
例如:
解绑所有事件:
$("btn").unbind();
解绑指定事件:
$("button").unbind("click");
23.事件转换
$("#btn").hover(鼠标移入事件,鼠标移出事件);

js相关语法知识的更多相关文章

  1. JS相关重点知识 (概况)

    1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的. 2.当从外部引入js文件时,该外部文件里面可以有多个方法,   html页面中的oncl ...

  2. 那点你不知道的XHtml(Xml+Html)语法知识(DTD、XSD)

    什么是XHtml: 摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML. XHtml可当模板引擎应用: CYQ.Data 框架里有一套XHtmlAction模板引擎, 应用在QBlo ...

  3. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  4. JSP的学习(5)——语法知识三之include指令

    本篇继续来对JSP语法中的JSP指令进行学习,在<JSP的学习(3)——语法知识二之page指令>中,已经介绍了JSP指令的书写格式和page指令的详细信息,所以在这一篇中我们会对JSP指 ...

  5. thinkPHP 模板中的语法知识 详细介绍(十二)

    原文:thinkPHP 模板中的语法知识 详细介绍(十二) 本章节:介绍模板中的语法,详细的语法介绍 一.导入CSS和JS文件    ==>记住常量的是大写 1.css link .js  sc ...

  6. XHtml(Xml+Html)语法知识(DTD、XSD)

    那点你不知道的XHtml(Xml+Html)语法知识(DTD.XSD) 什么是XHtml: 摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML. XHtml可当模板引擎应用: CYQ ...

  7. 【RAC】RAC相关基础知识

    [RAC]RAC相关基础知识 1.CRS简介    从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...

  8. RxSwift之路 1#Swift语法知识准备

    RxSwift之路 1#Swift语法知识准备 在开始学习 RxSwift 之前,一定要对 Swift 相关语法有所了解,否则就很难理解为什么可以这样.关于 Swift 的学习其实只要看看 Swift ...

  9. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 安装spyder记录

    sudo apt-get install spyder 报错:ERROR: Could not find a version that satisfies the requirement pyqt5& ...

  2. 第2章 Python编程基础知识目录

    第2.1节 简单的Python数据类型.变量赋值及输入输出 第2.2节 Python的语句 第2.3节 Python运算符大全 老猿Python,跟老猿学Python! 博客地址:https://bl ...

  3. PyQt(Python+Qt)学习随笔:invisibleRootItem方法访问QTreeWidget树型部件的隐形根节点

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 我们知道在数据结构上来说,任何树都是有根节点的,但我们在QTreeWidget对象中并没有看到界面上 ...

  4. PyQt(Python+Qt)学习随笔:QStandardItemModel指定行和列创建模型后的数据项初始化的两种方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QStandardItemModel通过构造方法 QStandardItemModel(int ro ...

  5. 第14.4节 使用IE浏览器获取网站访问的http信息

    上节<第14.3节 使用google浏览器获取网站访问的http信息>中介绍了使用Google浏览器怎么获取网站访问的http相关报文信息,本节介绍IE浏览器中怎么获取相关信息.以上节为基 ...

  6. PHP代码审计分段讲解(11)

    后面的题目相对于之前的题目难度稍微提升了一些,所以对每道题进行单独的分析 27题 <?php if(!$_GET['id']) { header('Location: index.php?id= ...

  7. 静湖ABC段扫描器(长更)

    想学习python图形化的知识,从C段扫描器开始入手,很多的扫描器只能扫描C段,对于A,B段却没有设置这个功能,所以想将扫描A段和B段的功能跟C段一起做了. 暂时的想法是,先完成C段扫描器,扫描的同时 ...

  8. LibreOj-10012-「一本通-1-2-例-2」Best-Cow-Fences

    题目地址 思路 二分平均值,区间为$0$~$2000$.将每个$a[i]$减去平均值,就只用考虑字段和是否$>=0$了. 关于计算子段和,可以使用前缀和表示,$sum[i]$表示前$i$个数的和 ...

  9. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  10. antdv的Upload组件实现前端压缩图片并自定义上传功能

    Ant Design of Vue的Upload组件有几个重要的api属性: beforeUpload: 上传文件之前的钩子函数,支持返回一个Promise对象. customRequest: 覆盖组 ...