Day15 Javascipt内容补充
JavaScript函数:
函数:
function 函数名(a,b,c){
执行代码
} 1,如何去找到标签
Dom直接选择器:
1,找到标签
#获取单个元素
document.getElementById('id')
整个html的id不可重复 #获取多个元素
document.getElementByTagName("div")
或者
document.getElementByClassName('class') Dom间接选择器:
也就是说先找到一个标签,然后去找他的上级,下级,父级等标签
tag = document.getElementById('id') parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
可以利用tag.方法来使用 2,操作标签
标签.innerText="" #对标签内的元素重新赋值
标签.className="" #改掉class的值
标签.classList.add="" #添加指定样式
标签.classList.remove="" #删除指定样式 实现菜单切换的小例子模型:
<div onclick='func()'>点我</div>
<script>
function func(){
}
</script> 函数分为了三种:
普通函数:
function func(arg){
}
匿名函数:
function(){
console.log(123);
}
自执行函数:
function func(){
}
func() 如果一个项目里边需要用到多个网站的js,可以针对不同的网站的js定义函数
function 张洋(){
function f1(){
}
} function egon(){
function f1(){
}
}
JavaScript序列化以及转义:
序列化:
JSON.stringify(li):将一个列表转化成字符串
JSON.parse(s):将字符串转换成列表 转义:将URL的中文转移成字符串
客户端(cookie) ==> 服务器端(一般都是将cookie等信息转义后存到电脑上)
decodeURI():URI未转义的字符
encodeURIComponent():转义uri组件中的字符
escape():对字符串进行转义
unescape():给转义字符串串解码 eval:
python:val = eval(表达式)
exec(执行代码)
JavaScript:
eval 时间操作:
Date类
var d = new Date()
<input type='text' id='inp' value='123' class='c1'>
var ele_inp=document.getElementById('inp');
ele_inp.onclick=function(){
console.log(this.getAttribute('value')) ;
this.setAttribute("value",'666');
this.style.color='red'; //点击文字变红
this.style.border='red 1px solid' // 点击边框变红,有宽度
}
onchange事件:
当点击了以后发生了改变只执行的操作。
<body>
<select name="pro" id="s1">
<option>请选择省份</option>
<option value="111">河南省</option>
<option value="222">河北省</option>
<option value="333">东北省</option>
</select>
<script>
var ele_select=document.getElementById("s1");
ele_select.onchange=function () {
alert(1234)
console.log(ele_select.value)
}
</script>
节点操作:
<body>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style> <div class="outer">
<h1>hello</h1>
<a href="http://www.baidu.com">click</a>
</div>
<!--<hr>-->
<button class="add">ADD</button>
<script>
var ele_addBtn=document.getElementsByClassName("add")[0];
var ele_outer=document.getElementsByClassName("outer")[0];
ele_addBtn.onclick=function () {
//创建节点对象
//document.createElement("a") 创建一个空的a标签
var ele_a= document.createElement("a");
ele_a.innerHTML='click'; //文本赋值
ele_a.href="http://www.baidu.com"; //添加节点对象 父节点.appendChild(添加节点)
ele_outer.appendChild(ele_a);
}
</script>
</body>
Day15 Javascipt内容补充的更多相关文章
- python 全栈开发,Day93(vue内容补充,VueX)
昨日内容回顾 1. 页面的布局 Vue中使用Bootstrap搭页面 1. 安装 1. npm install bootstrap@3.3.7 -S 2. 使用 1. import 'bootstra ...
- day10上节内容补充和初始函数
1.上节内容补充 文件的删除和修改: #文件的删除和修改 #文件中全部都要修改 # with open('歌词',encoding='utf-8') as f1,open('歌词.bak','w',e ...
- ASP.NET Core 2.2 WebApi 系列【九】使用SignalR (作者:tenghao510 ) 学习及内容补充
原文地址: ASP.NET Core 2.2 WebApi 系列[九]使用SignalR 今天,看到了大牛的这篇博文, 发了一下评论, 我很惊喜, 没想到他很快就回复了我, 而且通过QQ帮助了S ...
- day15模块内容
1.生成器表达式 先说三元表达式如下 res = [i for i in range(10) if 1 > 5] 这样res就是一个列表6,7,8,9] 只要在这个基础上稍加调整,如下 方括号改 ...
- git内容补充-Git零基础快速入门-苏玲
https://git-scm.com/book/zh/v2 git历史 集中式版本控制管理:cvs.svn 分布式版本控制管理:git 基本命令 git config --list --global ...
- DOTNET CORE源码分析之IOC容器结果获取内容补充
补充一下ServiceProvider的内容 可能上一篇文章DOTNET CORE源码分析之IServiceProvider.ServiceProvider.IServiceProviderEngin ...
- Django学习路32_创建管理员及内容补充+前面内容复习
创建管理员 python manage.py createsuperuser 数据库属性命名限制 1.不能是python的保留关键字 2.不允许使用连续的下划线,这是由django的查询方式决定的 ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 26-[jQuery]-内容补充
jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryUI 中文网: http ...
随机推荐
- FND Debug Log(FND_LOG_MESSAGES)
之前每个模块记录日志的方式都不同,都会把日志写到不同的文件中,对于User来说很麻烦,需要记住很多的配置,现在越来越多的模块使用FND Logging来存储日志,比如WIP,RCV,OAF...FND ...
- (六十七)Xcode导入XMPPFramework框架
首先下载XMPPFramework框架,将Vendor内容导入到工程中,其中KissXML需要额外的框架,需要通过Xcode设置. 选择工程选项中TARGETS的General标签,最下侧有Linke ...
- 一台电脑上同启动两个Tomcat的方式,windows/Linux配置。
安装两个jdk,一个JDK路径在:C:\ProgramFiles (x86)\Java\jdk1.7.0_25,另外一个JDK的路径在E:\UCMSServer\j2sdk 在环境变量里并设置J ...
- C语言的布尔类型(_Bool)
也许很多人都和我一样,不知道现在的C语言已经有了布尔型:从C99标准开始,类型名字为"_Bool". 在此之前的C语言中,使用整型int来表示真假.在输入时:使用非零值表示真:零值 ...
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...
- ARM v7汇编与相关练习
程序入口: _startc 语言入口: main@: 注释;main: 标签;伪指令: 给汇编器读的指令;.global main ...
- 15_Android中任务栈
1.一个应用程序一般都是由多个activity组成的. 2.任务栈(task stack)(别名backstack后退栈)记录存放用户开启的activity的. 3.一个应用程序一被开启系统就给 ...
- 使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能
1.概述 TabLayout是在2015年的google大会上,google发布了新的Android Support Design库的新组件之一,以此来全面支持Material Design 设计风格 ...
- JavaScript进阶(三)常见工具(校验、通用)
JS常见工具(校验.通用) // 姓名校验 var checkName = function(name) { // 收货人姓名校验(准则:姓名为2-4汉字) var regu = /^[\u4E00- ...
- Leetcode_114_Flatten Binary Tree to Linked List
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42744919 Given a binary tree, f ...