Python学习day10 Javascript/Jquery

#Created on 2017年1月18日

第1课 上节作业 9minutes

第2课 上节内容回顾以及作业分析 27minutes
上节内容：
HTML
头部：跳转，标题，编码
身体：各种标签
CSS
选择器： 标签选择，ID选择器，层次
属性：背景，小图标，边框，外边距，内边距，
display,cursou,float,position:fixed/abusole/relative,
透明度opacity

第3课 上节内容回顾以及作业分析二 15minutes

浏览器分辨率不一样处理问题
可定义最小宽度，以像素方式指定
居中，顶部70px
<div style="500px;height:300px;
border:1px solid #ddd; margin:0 auto;margin-top:70px">
<div style="300px;height:200px;
border:2px solid #333; margin:0 auto;margin-top:50px">
</div>

第4课 JS基础之js文件存放位置 16minutes
本期内容：
JavaScript基础
Dom编程
jQeury

通过文件方式调用
<script src='js1.js'></script>
当前页面的调用
<script type="text/javascript">
alert('这是页面的提示');
</script>

加载顺序的问题,从上往下，同Python：
1.一旦JS出错，页面无法加载，用户无法查看
2.后面JS查不到页面标签

将Js放在Body最下部分

第5课 JS基础之变量和函数 21minutes
//alert('output')
/*
多行注释

//全局变量
name = 'global'
//局部变量
var name = 'var'
*/

Foo('loutsx')

//全局变量前加Window，方便后续排错
window.name ='123'
Bar()

function Foo(name){
//默认参数，不推荐使用
var name = 'alex'
//var arg2 = arguments[1]
console.log(name);
//console.log(arg2);
return xxx; //返回值
}

function Bar(){
console.log(name);
return xxx;

2017年3月13日
第6课 JS基础之自执行函数 18minutes

匿名函数：将函数附值给一个变量
var temp = function(){}

自执行函数－－无需调用直接执行
(函数)()

//以下是自执行函数，但未能测试成功---已测试成功
(function(){
console.log('test');
})()

//函数自己的参数为形参，第二个括号为传入的参数
/*
(function(name){
console.log(name);
})('alex')
*/

4、字符串常用方法和属性
obj.trim() 去掉前后的空格
obj.charAt(index) 通过索引取字条的值
obj.substring(start,end) 取字串位置的数值
obj.indexOf(char) 得到字符所在索引
obj.length 字符的长度

var name=' dsf '
name.trim()
"dsf"
var a = 'dddddasdadsafafsdasf32t4qw'
undefined
a.substring(1,3)
"dd"
a.length
26

第7课 JS基础之for循环 24minutes

5、数组
声明，如：
var array = Array() 或 var array = []

添加
obj.push(ele) 追加
obj.unshift(ele) 最前插入
obj.splice(index,0,'content') 指定索引插入

测试
var n = [1,2,3,4]
n.push('last')
console.log(n)
n.unshift('first')
console.log(n)
n.splice(1,0,'bog') 最前的1为索引，可不连续
console.log(n)

[1, 2, 3, 4, "last"]
["first", 1, 2, 3, 4, "last"]
["first", "bog", 1, 2, 3, 4, "last"]

移除
obj.pop() 数组尾部获取
obj.shift() 数组头部获取
obj.splice(index,count) 数组指定位置后count个字符

切片
obj.slice(start,end)

合并
newArray ＝ obj1.concat(obj2)
a.concat(b)

var a = ["bog", 1, 2, 3, 4, 6]
var b = [9,8,7,6]
a.concat(b)
["bog", 1, 2, 3, 4, 9, 8, 7, 6]

翻转
obj.reverse()

字符串化
obj.join('_')
a.join('_')
"4_3_2_1_bog"
长度
obj.length
注意：字典是一种特殊的数组

6、循环

var a = '123456789';
for(var i=0;i<10;i++){
console.log(a[i]);
}<br>

for(var item in a){
console.log(a[item]);
}
练习：
正常For循环得到是索引值，可通过索引得到实际的值
var a = [4, 3, 2, 1, "bog"]
for(var i in a){console.log(i)}
0
1
2
3
4

var dict1 = {'a':1,'b':2}

for(var i in dict1){console.log(i)}
a
b

for(var i in dict1){console.log(dict1[i])}
1
2

for(var i=1;i<10;i++){console.log(i)}

通过以下方式可迭代数据,字典不好输出，可用上面方式
var array = ['allan','billy','loutsx','tony','jeff']
for(var i=1;i<array.length;i++){console.log(array[i])}

第8课 废话 22minutes

第9课 少课

第10课 DOM编程之操作标签和提交表单 32minutes

创造标签
<div id='t1'></div>
<script src='js1.js'></script>

<script type="text/javascript">
方式一：
创建标签
var tag = document.createElement('a');
tag.href= 'http://www.baidu.com';
tag.innerText = '点我啊';

var id1 = document.getElementById('t1');
id1.appendChild(tag);

方式二：
var tag = "<a href='http://www.baidu.com'>Hello</a>";
var id1 = document.getElementById('t1');
id1.innerHTML = tag;

</script>

标签
<div id='t1' class='show' name='loutsx'>显示</div>

可通过脚本对jss进行操作，更换其他Js
var id1 = document.getElementById('t1');
id1.className = 'hide';

更改标签的属性
var id1 = document.getElementById('t1');
console.log(id1.getAttribute('name'));
id1.setAttribute('name','myhome');
console.log(id1.getAttribute('name'));

标签
<div id='t2' style='300px;height:200px;border:2px solid #333;'></div>
var id1 = document.getElementById('t2');
t2.style.height = '100px'

提交表单--GET是将内容加到URL后面
<form id='f1' action='http://www.baidu.com' method='GET'>
<input id='query' type='text' name='query'>
<input type='button' value='提交' onclick='Foo()'/>
</form>
这里可能通过检查input是否为空，为空不提交并提示
如果用submit就会直接提交
<script type="text/javascript">
functon Foo(){
document.getElementById('f1').submit();
}
</script>

第11课 搜索框实例 11minutes

<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<body>
<input id='t1' type='text' class='gray' value='请输入关键字' onfocus='Enter()' onblur='Leave()'/>
<script type='text/javascript'>
function Enter(){
var id = document.getElementById('t1')
id.className='black'
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value=''
}
}
function Leave(){
var id = document.getElementById('t1');
var va1 = id.value;
if(va1.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';------修改样式
}else{
id.className = 'black';
}
}

</script>
</body>

第12课 滚动条和跑马灯实例 28minutes
滚动条
<div style='500px;background-color:red '>
<div id ='process' style='10%;background-color:green;height:10px'>
</div>
</div>

<script type='text/javascript'>
pro = 10;
function Foo(){
var id=document.getElementById('process')
pro = pro + 10;
if(pro>100){
//清楚定时器
clearInterval(interval)
}else{
id.style.width = pro +'%';
}
}
//定时器，setInterval每半秒执行一次
interval = setInterval('Foo()',500);
//setTimeout只执行一次

跑马灯
function Go(){
var content = document.title;
var firstChar = content.charAt(0);
var sub = content.substring(1,content.length);
document.title = sub + firstChar;
}
//一直循环
setInterval('Go()',500)

可对当前的操作进行停止操作
<input type='button' value='stop' onclick='Stop()'/>

function Stop(){
clearTimeout(interval)
}

create 2017年3月20日
第13课 滚动条和跑马灯实例 28minutes

jQuery:
文件下载有两种：正常版本和Mini版本，实际上线时使用Mini

在Html里直接加载就可以：
<script src="js/jquey.js"></script>

选择器：
#id
$("#id") 找到所有的想要的ID

element 标签选择器
$("div") 找到所有需要的标签

class css选择器
$(".myClass") 找到想要的css的标签内容

select1,select2,select3
$("div,span,p.myClass") 组合选择器

层级选择器
$("form input")找Form下的Input标签

基本：
:gt :lt :eq

属性
css中input
<style>
input[type='button']
xxx:xxx
</style>

jQuery写法：
$("input[name='newsletter']")
$(":text") 得到所有text的input标签

属性：
$("#id1").text() 得到id1的内容
$("#id1").html() 得到id1的html标签

jquery text/html后面的参数默认为取值，加参数为附值

jquery的value的获取用val
$("input[name='username']").val('ddd') 附值

var a =$("input[name='username']").attr('name')
$("input[name='username']").attr('name','新名字')

CSS
addClass
removeClass
toggleClass 可结合Button使用，可自动添加及删除

checkbox默认选中
$("input[type='checkbox']").prop("checked",true);

获取值，默认False
$("input[type='checkbox']").prop("checked");

不可用，默认False，可选
$("input[type='checkbox']").prop("disabled",true);

对P标签下的Css进行获取和设置
$("p").css("color")
$("p").css(["color","red",background,'blue')

显示鼠标的当前位置
$(window).scrollTop()

当页面滚动发生变化时执行里面的函数
$(window).scroll(函数)

返回顶部正常可以用Click来触发
可直接用Jquery来实现
$(function(){
$("#id").click(function(){
$(window).scrollTop(0);
});
})

create 2017年3月20日
第14课 Jquery文本操作和过滤器和事件和各种实例及常用模板和作业 103minutes

文档处理

在标签后面追加内容，可是文本或Html
$("p").append("<b>hello</b>")

以后可直接通过Jquery方式来创建点击事件，不要直接在标签里写
$(function(){
$("#id").click(function(){
$("p").append(内容)；
})；
})

添加不同的内容
$(function(){
$("#id,#id2").click(function(){
当前点击的标签
var id = $(this).attr('id);
if(id=='id1'){
$("p").append(内容1)；//这里的追加，只能一直增加
$("p span").text(内容1)； //这里是在P下再创建一个Span标签，每次附不同的值，就是不同的变换，每次只显示一个值
}else if(id=='id2'){
$("p").append(内容2)；
$("p span").text(内容2)；
}else{
$("p").append(其他内容)
}
})；
})

prepend 在前面增加
appendTo(content) 用于被增加的内容(不常用)
$("p").appendTo(标签)

after 在标签外部增加
empty() 把内容删除
remove() 把标签内容全删除

筛选（得到标签的对象）
filter()
children(expr)
parent(expr)
next(expr) 下一个标签
prev(expr) 前一个标签
slbings(expr) 所有兄弟标签(不含自己)


事件
scroll
click
foucs 获取焦点
blur 失去焦点
通过Jquery方式来修改之前的的搜索框，待实验
Jquery可以进行链式书写，可读性差

多选框选择功能 !是取后面的反值
Memu功能