python&&javascript开发基础&&学习笔记
python&&javascript开发基础&&学习笔记
- javaScript基础
- 存在形式
- 变量和函数的声明
- javascript基础之自执行函数
- JavaScript基础之for循环
- Dom编程
- DOM编程之操作标签和提交表单
- 搜索框示例(仅参考，需改)
- 滚动标题与进度条实例
- jQuery
- jQuery选择器和CSS属性实例
- 浏览页面点击返回顶部示例
- jQuery之文本操作
- jQuery之全选、不选、反选
- jQuery之menuList示例
- jQuery之tabMenu示例
javaScript基础
存在形式
- 文件，如
<script src="index.js"></script>
- 当前页，如
<script type="text/javascript">alert("这是alert功能");</script>
javascript文件一般放在body标签的底部，因为网页代码是顺序执行，所以通过该方法可以提高网页的打开速度。并且可以预防出现JavaScript文件提前加载完而页面标签未加载完成，javaScript文件调用页面标签不存在的bug。
如果出现加载到页面标签且该页面标签执行JavaScript方法的情况呢？
使用JavaScript写程序时，注意行代码结束时用";"分割，这样以后对JavaScript代码压缩时不会报错。
变量和函数的声明
//定义全局变量name
name = "lucky";
//定义全局变量address(推荐！！！).window是全局的一个对象，你创建的全局变量也是window的一个新属性。
window.address = "china";
//定义局部变量pwd
var pwd = "77777";
console.log("姓名是:" + name);
console.log("密码是:" + pwd);
//定义函数
function func(pwd){
//定义默认参数。使用"arguments[1]"获取函数func接收的第二个参数的值。
var arg2 = arguments[1];
//更改全局变量name
name = "modifiedByFunc"
console.log("输出接收的参数的值:" + pwd);
console.log("输出默认的参数的值:" + arg2);
}
func(pwd,"使用'arguments[1]'获取函数func接收的第二个参数的值")
function func2(){
console.log("全局变量name已经被函数func修改了：" + name);
console.log("全局变量window.address：" + window.address);
//返回变量address的值
return address;
}
result = func2()
console.log("全局变量address的返回值是：" + result);
console.log("创建的这个'全局'的变量就是为这个'全局'的对象增加新的属性并赋值，全局对象又叫window。为window增加新的属性并赋值等于创建了一个全局变量。");
javascript基础之自执行函数
//匿名函数，可以理解为将一个函数赋值给一个变量
var anonymousFunc = function(
// console.log("this creates an anonymous function and execution");
)
//anonymousFunc()
//自执行函数,首先写俩括号，第一个括号内写真正的函数，第二个括号写实参
//常用于当网页打开加载完成后让一个函数自动执行的场景
(function(name){
console.log("this creates an self-execution function and execution");
})('dfq')
/*字符串常用方法和属性
obj.trim
obj.charAt(index)
obj.substring(start,end)
obj.indexOf(char) 根据字符找索引
obj.length
*/
var name = " dfq ";
//使用"obj.trim"去除空格保留dfq
name.trim();
//javascript的字符串name是由一个一个的字符组成,使用"name.charAt(6)"根据索引在字符串name内查找字符
name.charAt(6);
//使用"name.substring(5,7);"获取字符串name内的某一段
name.substring(5,7);
//使用"name.length;"获取字符串name的长度
name.length;
JavaScript基础之for循环
//声明数组（常规方法）
var array = [1,2,3,4];
//声明数组（向数组对象Array传入元素）
var array1 = Array(5,6,7,8);
console.log(array);
console.log(array1);
//在数组尾部追加元素
array.push("button");
console.log(array);
//在数组头部插入元素
array.unshift("top");
console.log(array);
//在数组某索引"3"处插入元素,此处中间写"0"代表只插入不删除。
//对于JavaScript来说，其数组索引的间隔可以不是连续的，即索引号0后面可以直接是是索引号100.
array.splice(3,0,"insert3");
array.splice(100,0,"insert100");
array[99] = "insert99"
console.log(array);
//在数组尾部删除元素
array.pop()
console.log(array);
//在数组头部删除元素
array.shift()
console.log(array);
//在数组某索引3处删除1个元素
array.splice(2,1)
console.log(array);
//在数组内的某两个索引之间截取一段
array2 = array.slice(2,4)
console.log(array2);
//将数组array和数组arry1合并
array3 = array.concat(array1)
console.log(array3);
//将数组array头尾翻转
array.reverse()
console.log(array);
//以"_"作为连接符将数组array拼接成字符串
array4 = array.join("_");
console.log(array4);
//输出字符串的长度
console.log(array.length);
//定义字典
var dicObj = {"name":"dfq","age":24}
console.log(dicObj);
//循环数组，输出索引
for (var item in array1){
console.log(item);
console.log(array1[item]);
}
//循环字典，输出key
for (var item in dicObj){
console.log(item);
console.log(dicObj[item]);
}
//固定次数循环
for (var i=0;i<5;i++){
console.log(i);
}
Dom编程
DOM编程之操作标签和提交表单
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>css demo 6title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.show{
}
style>
head>
<body>
<div id="superiorElement">div>
<div id="superiorElement2">div>
<div class="show" id="superiorElement3">我本非隐藏div>
<div class="show" id="superiorElement4" name="dfq">我本name dfqdiv>
<div style="width:500px;height:200px;border:2px solid #333;" id="superiorElement5" name="dfq">我本宽500高200div>
<form id="superiorElement6" action="http://www.sogou.com/sogou?" method="GET">
<input type="text" name="query" />
<input type="submit" value="提交" />
<p>"好习惯：在onclick的执行函数的后面加";"分号。"p>
<input type="button" onclick="iCanSubmit();" value="button也能submit" />
form>
<script type="text/javascript">
//使用JavaScript创建标签
//创建a元素对象
var aObj = document.createElement('a');
//设置元素对象a的href属性
aObj.href = "http://www.sina.com";
//设置元素对象a的文本属性
aObj.innerText = "新浪链接";
//通过上级元素的id来确定上级元素div的位置且创建div元素对象
var divObj = document.getElementById("superiorElement");
//将新创建的元素对象aObj插入到上级元素对象divObj内
divObj.appendChild(aObj);
//方法二
var labelA = "百度链接"
var divObj2 = document.getElementById("superiorElement2");
divObj2.innerHTML = labelA;
//使用JavaScript更改元素的class的值
var divObj3 = document.getElementById("superiorElement3");
divObj3.className = "hide";
//使用JavaScript更改元素的name的值
var divObj4 = document.getElementById("superiorElement4");
console.log(divObj4.getAttribute("name"));
divObj4.setAttribute("name","lalala");
console.log(divObj4.getAttribute("name"));
//使用JavaScript更改元素的样式
var divObj5 = document.getElementById("superiorElement5");
divObj5.style.width = "150px";
divObj5.style.height = "150px";
//将字符串转码成数字
strObj = '112233';
console.log(strObj);
intObj = parseInt(strObj);
console.log(intObj);
//模拟提交
function iCanSubmit(){
divObj6 = document.getElementById("superiorElement6").submit();
}
script>
body>
html>
搜索框示例(仅参考，需改)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>css demo 6title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.show{
}
.gray{
color:gray;
}
.black{
color:black;
}
style>
head>
<body>
<p>搜索框焦点判断示例(有错误)p>
<input type="text" id="element1" value="此时此刻此处无焦点" onfocus="Enter();" onblur="Leave();">input>
<script type="text/javascript">
//当文本框获得焦点时
function Enter(){
//捕获文本框
var element1Obj = document.getElementById("element1");
//设置字体颜色为黑色
element1Obj.className = "black";
//如果文本框的内容仍是"此时此刻此处无焦点"或对文本框去空格处理后值为空
if(element1Obj.value == "此时此刻此处无焦点" || element1Obj.value.trim() == ""){
//则置空
element1Obj.value == "";
console.log(element1Obj.value);
}
}
//当文本框失去焦点时
function Leave(){
var element1Obj = document.getElementById("element1");
var element1ObjValue = element1Obj.value;
if (element1ObjValue.length == 0|| element1Obj.value.trim() == ""){
element1Obj.value = "此时此刻此处无焦点";
element1Obj.className = "gray";
}else{
element1Obj.className = "black";
}
}
script>
body>
html>
滚动标题与进度条实例
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>欢迎各位大哥哥、大姐姐们不辞辛苦，观看滚动的title title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
style>
head>
<body>
<p>定义滚动条p>
<div style="width:500px;background-color:#ddd;">
<div id="process" style="background:red;width:10%;height:50px;">div>
div>
<script type="text/javascript">
//定义进度百分比
window.pro = 10;
function func(){
var processObj = document.getElementById("process");
window.pro += 10;
if(pro > 100){
//停止循环执行的函数
clearInterval(interval);
}else{
processObj.style.width = pro + "%";
}
}
//设置定时执行的函数,每隔两秒执行一次。
//创建interval句柄，该句柄用于暂停定时执行动作。
interval = setInterval("func()",2000);
//固定时间后（2000）执行且仅执行一次
//常用于用户执行某操作后弹出提示，等待几秒后，提示消失的场景。
interval1 = setTimeout("func()",2000);
//取消延迟执行任务
clearTimeout(interval1);
//走马灯样式title示例
function rollingTitle(){
//获取title
var content = document.title;
//取title的首字符作为第一部分
var firstChar = content.charAt(0);
//取title除首字符之外的字符作为第二部分呢
var sub = content.substring(1,content.length);
//将第二部分拼接在第一部分前面并更新为当前的title
document.title = sub + firstChar;
}
setInterval("rollingTitle()",1000);
script>
body>
html>
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更好，做的更多)，对javascript进行了封装。
jQuery选择器和CSS属性实例
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.class1{
font-size:50px;
}
.class2{
border:2px solid #333;
}
style>
head>
<body>
div>
<table style="border:1px">
<tr><td>索引1td>tr>
<tr><td>索引2td>tr>
<tr><td>索引3td>tr>
table>
<input type="checkbox" name="dfq">jQuery使用attr更改为默认选中状态input>
<div id="element2">本是无一物div>
<input name="element3Name" type="text" value="本是无一物" />
<input type="checkbox" name="element4Name">jQuery使用prop更改为默认选中状态input>
<div class="class1">使用jQuery为该文本追加classdiv>
<input type="button" value="clickHere" onclick="element5Func()" />
<p style="background:red;">我笨非这样，直到遇到了jQuery，，，p>
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
//jQuery之id选择器，查找ID为"element1"的元素
console.log($("#element1"));
//jQuery之标签选择器，查找标签为"div"的元素
console.log($("div"));
//jQuery之class选择器，查找class为"hide"的元素
console.log($("hide"));
//jQuery之联盟选择器，可以同时使用多个类型的选择器
console.log($("div,#element1,div.hide"));
//jQuery之层级选择器，查找form标签内的input标签
console.log($("form input"));
//jQuery之比较选择器，查找tr标签内索引大于0的标签
console.log($("tr:gt(0)"));
//jQuery之条件选择器,查找所有name是dfq的input属性并设置其checked值为true（默认选择状态）。
console.log($("input[name='dfq']").attr("checked",true));
//jQuery之条件选择器，查找所有input标签内的type是checkbox的标签
console.log($(":checkbox"));
//jQuery之属性控制，将ID为"element2"的元素的text值和html取出
var textValue = $("#element2").text();
var htmlValue = $("#element2").html();
console.log(textValue);
console.log(htmlValue);
//赋值。
//不加参数是取值，加上参数是赋值。
$("#element2").text("何必染尘埃");
//jQuery之属性控制，将input中内name是"element3Name"的元素的value值获取并更改其value值
console.log($("input[name='element3Name']").val());
$("input[name='element3Name']").val("何必染尘埃");
//获取name属性值
console.log($("input[name='element3Name']").attr("name"));
//更改name属性值
$("input[name='element3Name']").attr("name","element3NewName");
console.log($("input[name='element3NewName']").attr("name"));
//jQuery之属性控制，将input中的type='checkbox'的元素设置其复选框为默认选中状态。
$("input[type='checkbox']").prop("checked",true);
//jQuery之属性控制，将input中的type='checkbox'的元素设置其复选框为不可选中状态。
$("input[type='checkbox']").prop("disabled",true);
//jQuery之属性控制，将代码中全部class1的属性的标签追加class2的属性
$(".class1").addClass("class2");
function element5Func(){
//使用"$(".类1").toggleClass("类2");"实现对全部class1的属性的标签反复"追加-删除"class2的属性
$(".class1").toggleClass("class2");
}
//jQuery之属性控制,设置或更改特定标签的特定属性的值
//获取p标签颜色属性的值
console.log($("p").css("color"));
//更改全部p标签颜色属性的值为蓝色
$("p").css({background:"blue"});
script>
body>
html>
浏览页面点击返回顶部示例
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.returnTop{
position:fixed;
width:80px;
height:20px;
right:20px;
bottom:20px;
background-color:red;
}
style>
head>
<body>
<div class="returnTop hide" id="returnToTop" onclick="goTop();">返回顶部div>
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
//jQuery之位置选择器，设置标签距离屏幕的位置
//"$("window")"代表整个屏幕对象
/*
//输出当前位置距顶部的距离
console.log($(Window).scrollTop());
//滚回到顶部，0代表顶部。
$(Window).scrollTop(0)
*/
//"$"符号可以理解为是jQuery的对象.当调用了jQuery文件时，"$"符号生效，否则无效。
//返回顶部示例1
//监听滑动鼠标的事件。
//当页面滚动时,执行函数
$(window).scroll(function(){
//获取画面距离顶部的距离
var distanceFromTop = $(window).scrollTop();
if(distanceFromTop > 0){
//显示返回顶部按钮;
$("#returnToTop").removeClass("hide");
}else{
//隐藏返回顶部按钮;
$("#returnToTop").addClass("hide");
}
console.log(distanceFromTop);
} );
function goTop(){
$(window).scrollTop(0);
}
//返回顶部示例2
//当页面加载完成之后，默认会执行以下形式的函数
$(function(){
console.log("当页面加载完成之后，默认会执行该形式的函数")
//当页面加载完成后，为jquery绑定事件
$("#returnToTop").click(function(){
$(window).scrollTop(0);
});
})
script>
body>
html>
jQuery之文本操作
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.gray{
color:red;
}
.black{
color:black;
}
style>
head>
<body>
<p>使用jQuery在p标签下插入新的标签<span>span>p>
<input type="button" id="element1Id" value="追加内容" />
<input type="button" id="element2Id" value="追加内容" />
<input type="text" class="gray" id="element3Id" value="请输入关键字" />
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
//jQuery之内容插入
$("p").append("百度链接");
//定义监听事件
$(function(){
//同时监听"#element1Id,#element2Id"标签
$("#element1Id,#element2Id").click(function(){
//获取触发点击事件的标签。"$(this)"代表触发点击事件的标签
if( $(this).attr("id") == "element1Id" ){
//最佳内容
//$("p").append("element1IdaddConten");
//替换内容
$("p span").text("element1IdaddConten");
}else if( $(this).attr("id") == "element2Id" ){
//最佳内容
//$("p").append("element2IdaddConten");
//替换内容
$("p span").text("element2IdaddConten");
}
})
})
//"appendTo"是"append"的逆向追加
//"children([expr])".查找某个标签的子标签对象
//"parent([expr])".查找某个标签的父标签对象
//"next([expr])".查找某个标签的下一个标签对象
//"nextall([expr])".查找某个标签的下一个标签对象
//"prev([expr])".查找某个标签的前一个标签对象
//"prevall([expr])".查找某个标签的前一个标签对象
//"siblings([expr])".查找与某个标签（不包括自己）处于同一级所有标签对象
//链式使用
//$("#element3Id").focus(function(){}).blur(function(){}).click(function(){}).change(function(){});
//使用jQuery实现搜索框聚焦失焦示例
$(function(){
//对id为element3Id的元素做焦点事件监听
$("#element3Id").focus(function(){
//文本框聚焦时
//方法一
//$(this).addClass = "black";
//方法二
$("#element3Id").addClass = "black";
//如果文本内容为"请输入关键字"或为空
if($("#element3Id").val() == "请输入关键字" || $("#element3Id").val().trim() == ""){
//将文本内容置为空
$(this).val("");
}
});
//对id为element3Id的元素做失焦事件监听
$("#element3Id").blur(function(){
if($(this).val().length==0||$(this).val().trim()==""){
$(this).val("请输入关键字");
$(this).addClass = "gray";
}else{
$(this).attr("class","black");
}
});
});
script>
body>
html>
jQuery之全选、不选、反选
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
style>
head>
<body>
<p>全选、不选、反选示例p>
<p>本次示例中attr全部由prop替代，原因：p>
<div id="checkList">
<input type="checkbox" value="1" />篮球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />羽毛球
div>
<input type="button" value="全选" id="selectAll" />
<input type="button" value="不选" id="unselectAll" />
<input type="button" value="反选" id="reverseAll" />
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
$(function(){
$("#selectAll").click(function(){
//获取id为checkList的标签下的某值为checkbox的标签
$("#checkList :checkbox").prop("checked",true);
//或$("#checkList input[type="checkbox"]").prop("checked",true);
})
$("#unselectAll").click(function(){
$("#checkList :checkbox").prop("checked",false);
})
$("#reverseAll").click(function(){
//使用".each(function(){})"循环所有的标签并对每一个标签执行函数
$("#checkList :checkbox").each(function(){
//对当前标签"$(this)"的checked的值取反
$(this).prop("checked",!$(this).prop("checked"));
})
})
})
script>
body>
html>
jQuery之menuList示例
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
style>
head>
<body>
<p>menuListp>
<div class="container">
<div>
<div class="title">menu1div>
<div class="body">
<a>content1-1a>
<a>content1-2a>
<a>content1-3a>
div>
div>
<div>
<div class="title">menu2div>
<div class="body">
<a>content2-1a>
<a>content2-2a>
<a>content2-3a>
div>
div>
<div>
<div class="title">menu3div>
<div class="body">
<a>content3-1a>
<a>content3-2a>
<a>content3-3a>
div>
div>
<div>
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
$(function(){
//获取class是title的全部标签对象并监听其点击事件
$(".title").click(function(){
//点击事件触发了
//选中当前触发了点击事件的标签对象.取该标签的父标签对象.取父标签的全部同级标签.取父标签的全部同级标签的子标签对象并令具备class="body"的子标签更改class属性.添加class新属性为隐藏状态;
$(this).parent().siblings().children(".body").addClass("hide");
//选中当前触发了点击事件的标签对象.取该标签对象相邻的下一个标签对象（class="body"的对象）.移除友邻标签对象的隐藏状态;
$(this).next().removeClass("hide");
})
})
script>
body>
html>
jQuery之tabMenu示例
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>demo 10title>
<style>
.hide{
display:none;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
style>
head>
<body>
<p>tabMenup>
<div class="container">
<div class="tab-menu-box1">
<div class="menu">
<ul id="tab-menu-title">
<li class="current" content-to="1">价格趋势li>
<li content-to="2">市场分布li>
<li content-to="3">其他li>
ul>
div>
<div id="tab-menu-body" class="content">
<div content="1">content1div>
<div content="2" class="hide">content2div>
<div content="3" class="hide">content3div>
div>
div>
div>
<script src="jquery-1.11.0.min.js">script>
<script type="text/javascript">
$(function(){
changeTab("#tab-menu-title","#tab-menu-body");
})
function changeTab(title,body){
//对title内的所有子元素监听点击事件
$(title).children().bind("click",function(){
//获取触发点击事件的标签对象
$menu = $(this);
//在body内查找与标签对象的content-to值相等的content对象
//??是什么导致了$(body)无法正常使用??
//changeTab("#tab-menu-title,#tab-menu-body");这个传参少了冒号。。。。
console.log($(body));
console.log($("#tab-menu-body"));
$content = $("#tab-menu-body").find('div[content="' + $(this).attr("content-to") + '"]');
$menu.addClass("current").siblings().removeClass("current");
$content.removeClass("hide").siblings().addClass("hide");
})
}
script>
body>
html>