黑马程序员技术交流社区
标题: 【石家庄校区】随堂笔记 [打印本页]
作者: csbl 时间: 2018-5-3 16:00
标题: 【石家庄校区】随堂笔记
本帖最后由 小石姐姐 于 2018-5-4 10:22 编辑
随堂笔记
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<linkhref="../../css/demo1.css" rel="stylesheet"type="text/css" />
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
undefined：未定义类型
boolean:布尔类型
number:数字类型
string:字符或字符串.
null：空
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
*function 函数名称(){
//函数体
}
*window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
Ø 什么是JQuery:
JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.
现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
Ø JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
Ø 引入Jquery的js文件.
<scriptsrc="../../js/jquery-1.11.3.min.js"></script>
Ø JQuery的入口函数:
// 传统的JS的方式：页面加载的事件只能执行一次.
/*window.onload = function(){
alert("aaa");
}
window.onload = function(){
alert("bbb");
}*/
// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
// window.onload 等页面加载完成后执行该方法.
// $(function(){}):等页面的DOM树绘制完成后进行执行.
// $相当于JQuery
$(function(){
alert("aaa");
});
$(function(){
alert("bbb");
});
Ø JQ的效果操作:
*show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){})
hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){})
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){})
slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
adeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
*animate(); --自定义动画
*toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
*removeAttr();
*prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
*removeProp();
*addClass()
创建一个HTML的页面.
在页面中创建一个广告部分的DIV,并且设置DIV是隐藏的.
设置定时操作,5秒钟执行一个显示的方法.
在设置一个定时,5秒钟执行一个隐藏的方法.
<script>
var time ;
$(function(){
// 设置定时 5秒钟执行一个显示广告的方法：
time= setInterval("showAd()",5000);
});
function showAd(){
// 获得元素：
//$("#adDiv").show(2000);
//$("#adDiv").slideDown(2000);
$("#adDiv").fadeIn(3000);
clearInterval(time);
// 再设置定时 5秒钟隐藏.
time= setInterval("hideAd()",5000);
}
function hideAd(){
//$("#adDiv").hide(2000);
//$("#adDiv").slideUp(2000);
$("#adDiv").fadeOut(3000);
clearInterval(time);
}
在页面中添加复选框.
引入jquery的js
编写JQ的入口函数
点击上面的复选框,获得下面的所有的复选框.
修改下面的复选框的值.
// 复选框全选和全不选
$(function(){
// 获得上面的复选框:
//var$selectAll = $("#selectAll");
//alert($selectAll.attr("checked"));
/*$selectAll.click(function(){
//alert($selectAll.prop("checked"));
if($selectAll.prop("checked") ==true){
// 上面的复选框被选中
$(":checkbox[name='ids']").prop("checked",true);
}else{
// 上面的复选框没有被选中
$(":checkbox[name='ids']").prop("checked",false);
}
});*/
// 简化：
$("#selectAll").click(function(){
$(":checkbox[name='ids']").prop("checked",this.checked);
});
});
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |