本帖最后由 小石姐姐 于 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); }); });
| 
收藏
淘帖
踩
