Web前期学习笔记
day04 JavaScript
一:相关知识
focus:焦点,使聚焦 blur:模糊,使模糊 node:节点JS的输出(innerHTML)
document.getElementById().innerHTML="";
document.write("");整个页面都重写,不要用
JS的事件
- onsubmit : 当表单被提交时执行脚本
- onfocus : 当元素获得焦点时执行脚本
- onblur : 当元素失去焦点时执行脚本
- onchange : 当元素改变时执行脚本(下拉列表改变事件)
- onkeydown : 当键盘被按下时执行脚本
- onkeyup : 当键盘被松开时执行脚本
- onkeypress: 当键盘被按下后又松开时执行脚本(有点像鼠标事件中的click
二代码实现
function mosuseenter(){
var enter=document.querySelector("form span");
enter.innerHTML="光标移入了";
enter.style.fontSize='12px';
enter.style.color="red";
}
function mosetleave(){
var enter=document.querySelector("form span")
enter.innerHTML="光标移出了";
enter.style.fontSize='12px';
enter.style.color="red";
}
案例JS隔行换色
一相关知识1.使用JS获得表格的行数
获得到控制的表格元素:
var tab1 = document.getElementById(“tab1”);
var len = tab1.rows.length;
2.表格的表头和表体( thead tbody )
表格中,只能有一个标签头,但可以有多个标签体
3.document 对象代表什么
文档对象模型
4.将一个HTML加载调内存形成一个树形结构从而操作树形结构可以改变HTML的样子
二 代码实现思路
//获取行
// 遍历每行:
// 偶数行
// 奇数行
案例 JS下拉框联动
一相关知识
1.createTextNode，createElement方法的区别
createTextNode :创建文本
createElement:创建元素标签
二 代码实现步骤
//1.根据索引把省对应的市获取到
var cities = data[value];
var xialakuang = document.getElementById("city");//获取第二个下拉框
//3.清除第二个下拉框中的数据
var opts = xialakuang.options;
for(var i=opts.length-1; i>=0; i--){
xialakuang.removeChild(opts);
}
//4.添加 请选择
var placeSelect = document.createElement('option');
placeSelect.innerHTML = '--请选择--';
xialakuang.appendChild(placeSelect);
//2.遍历市，将市添加到第二个下拉框中
for(var i=0; i<cities.length; i++){
var city = cities;//每一个市
var option = document.createElement("option");//创建option
option.innerHTML = city;//为option添加要显示的数据
xialakuang.appendChild(option);//将option添加到第二个下拉框
1.DOM的概述
什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
知道document，element，attribute中的属性和方法
2. DOM的常用操作
获得元素
document.getElementsByName(); -- 通过name属性获得元素 (注意:这里返回的是一个数组)
document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
document.createElement(); -- 创建元素
document.createTextNode(); -- 创建文本
添加节点：
element.appendChild(); -- 在最后添加一个节点.
element.insertBefore(); -- 在某个元素之前插入.
删除节点：
element.removeChild(); -- 删除元素
3.内置对象
创建数组
var arr=[];
var arr=new Array();
4.全局函数
var numInt=parseInt("123"):字符串转int
var numFloat=parseFloat("123"):字符串转浮点型
eval("alert(1)"):把字符串当作是JS命令运行起来
5.获取元素
document.querySelector("选择器")；
document.querySelectorAll("选择器")
6.获取样式名
document.getElementsByClassName()
7.伪数组
//伪数组 var obj = new Object(); obj[0] = 'a'; obj[1] = 'b' console.log(obj[0])
8.事件冒泡
元素里面有元素，且两个元素绑定相同的事件，里面元素触发该事件，外面的元素也会被触发该事件，事件从里到外触发
案例一 使用JQuery完成定时弹广告
一 相关知识
1.JQuery
定义: 是 JS的一个框架(类库) ,对传统的JS进行了封装
2.JQuery的入门
引入JQuery的入门 (要导入jar包)
3.区别:
JQuery的方式:相当于页面加载的事件,可以执行多次,效率比window.onload要高
window.onload:等页面加载完成后执行该方法.执行一次
$(function(){}):等页面的DOM树绘制完成后进行执行 执行多次
4.jquery与DOM对象的转换
jquery=>dom $("div")[0]
dom=>jquery $(dom对象);
5.jquery元素的显示和隐藏
show() hide()
6.JQuery对象 实际上是DOM数组,我们操作jq对象,实际操作里面每一个元素
案例二 使用jq完成隔行换色
一 相关知识
1.JQ的选择器
ID，类,并列,子孙元素，子元素(和以前的一样)
属性选择器: $("input[type='text']")>>input标签且type为text的
表单选择器:
:input
:text
:password....
表单属性选择器: $(":checked")
基本过滤选择器:
奇数: $("div:odd")
偶数: $("div:even")
等于: $("#three div:eq(1)")
第一个:$("#three div:first")
最后一个:$("#three last")
2.jquery删除和添加样式
removeClass() 里面传入的是样式
addClass() 里面传入的是样式: $("tr:even").addClass("bg-gray") (注意style标签里得有这个了选择器 如: . bg-gray{background:gray}
3. $("input[type='checkbox']:checked"):所有的被选中的多选框
案例三使用jq完成复选框的全选效果
一相关知识
1 使用prop()val()方法
获取 : $("div").prop("属性名")
prop("属性名","属性值")设置, attr...
二 代码实现
$("#checkAll").on("click",function(){
//$(this).prop('checked') 获取事件的checked属性
//prop("checked",$(this).prop('checked')); 修改$("input[name='sb']")的属性
$("input[name='sb']").prop("checked",$(this).prop('checked'));
案例四使用jq完成省市联动
一相关知识
1.创建元素$("")，
$("<option></option>")
2.添加子元素
A.append(B)
3.删除子元素
$().empty()
4.遍历数组
$('arr').each(function(index,element){})
今日补充
* animate(); --自定义动画
* toggle(); --单击切换函数
attr():自定义设置属性
prop():非定义原始属性(原来就有的)
remove()会将自己删除
empty()只会删除子元素
html():元素内容
css():设置格式
事件委派
$("ul").on('click','li',function(){ //实现将动态添加的棒球棒 也能够弹出来 事件绑定
var _this = $(this);
alert(_this.html());
day06JQuery和BootStrap
案例 使用JQ完成下拉列表左右选择
一 相关知识
1. selected 与checked
selected 用于单选 checked用于多选
selected 是选择很多项,但是只取当前的项,及最后一个选中的
checked是选中很多项,都选中
2.button和submit的区别
submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单.
案例 使用JQ完成表单校验
一 相关知识
trigger和triggerHandler区别:
trigger:调用某一个对象的某一个事件 支持事件冒泡
$('button').trigger('click') 调用button的的 click事件
triggerHandler :不支持事件冒泡
二 代码实现思路
// 键盘录入的时候执行校验
//光标移开的时候执行校验
//登录时执行校验
//判断有没有输入错误
BootStrap
一相关知识
1. 引入文件
<meta ... />
<title>BootStrap的栅格系统</title>
<!--引入 bootst的css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
2.BootStrap的全局CSS
布局容器:
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于100%宽度,占据全部视口(viewport)的容器
栅格系统:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
使用.row样式定义栅格的行.
定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n
|
|
收藏
淘帖
踩
