A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© csbl 初级黑马   /  2018-5-3 16:00  /  829 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马