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 ...
随机推荐
- 看人装X,我就来气,开启极限装X模式
本文书写,纯属扯淡,请勿观看 4进制比二进制更合理,在01的状态中添加了两种状态,从无到有和从有到无的两种过度状态. 如果非要用数值表示,用概率表示.01作为近代计算机的基础,但终究淘汰,构成下一代计 ...
- python类:magic魔术方法
http://blog.csdn.net/pipisorry/article/details/50708812 魔术方法是面向对象Python语言中的一切.它们是你可以自定义并添加"魔法&q ...
- JSTL之forEach的使用详解(简单的技术说得很详细)
在使用JSTL的核心标签库forEach之前,首先需要在JSP中通过taglib指令引入核心标签库: <%@ taglib uri="http://java.sun.com/jsp/j ...
- ffmpeg.c函数结构简单分析(画图)
前一阵子研究转码的时候看了FFmpeg的源代码.由于ffmpeg.c的代码相对比较长,而且其中有相当一部分是AVFilter有关的代码(这一部分一直不太熟),因此之前学习FFmpeg的时候一直也没有好 ...
- mysql DISTINCT 的实现与优化
DISTINCT实际上和GROUP BY的操作非常相似,只不过是在GROUP BY之后的每组中只取出一条记录而已.所以,DISTINCT的实现和GROUP BY的实现也基本差不多,没有太大的区别.同样 ...
- Leetcode_102_Binary Tree Level Order Traversal
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41929059 Given a binary tree, r ...
- 高性能C++网络库libtnet实现:IOLoop
IOLoop libtnet采用的是prefork + event loop的架构方式,prefork就是server在启动的时候预先fork多个子进程同时工作,而event loop则是基于epol ...
- 【Python】Talk Python To Me Podcast播客
这是Python相关的一个播客,通过播客的形式给大家讲述python那点事,相关的链接都会列出来,有一些是由文本内容的,如果听不太懂就看看英文原文.不fanqiang的情况下,网页打开没有问题,但是播 ...
- Mac下ImageMagick安装(libpng)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/42562705 ...
- Dynamics CRM2013/2015 禁止欢迎界面(Disable the Welcome Screen)
首次打开Dynamic CRM 2013会出现一个欢迎界面如下图,要想它不出现勾选图中的复选框就行,OK下回再打开就没有了. 但是当我们打开F12开发人员工具,清除域的缓存后再次打开CRM,这个欢迎 ...