jqueryday02(jQuery基本使用特性一些设置方法基本样式设置)

来源：互联网发布：nginx 参数编辑：程序博客网时间：2024/06/05 10:18

Power Save Mode 智能联想在file中
Ctrl+Alt+L,格式化自动排版
ctrl+D 复制到下一行
点击“File”-> “settings” 或者 ctrl+alt+s
Webstorm预置了其他编辑器的快捷键配置，可以点击Keymap中Keymaps下拉框切换快捷键的风格配置

    <style type="text/css">        * {            margin: 0;            padding: 0;        }        div {            height: 200px;            background: pink;            margin-bottom: 10px;            display: none;        }    </style>    <script src="jquery-1.11.1.js"></script>    <script>        //jquery min 是压缩过的版本        //区别 我们开发的时候 会用未压缩的版本 或者压缩        //项目上线的时候 要用压缩过的版本 积小成多        //2.xxx 版本不再支持IE6、7、8        //把jQuery 源文件放到项目中        //在页面中 引用jQuery        //$ 未定义 肯定是没有引用jQuery 源文件        //用jQuery之前 先引入jQuery 然后再写jQuery代码        //1、入口函数的方式        $(document).ready(function () {            $("#demo").click(function () {                $("div").show(1000).html("我哦")            })        });        //1、事件源        //js 中 document.getElementById("id");        //$("#id");        //        /*           2、事件        * js document.getElementById("id").onclick        * jQuery:$("#id").click        *   区别 jQuery的事件不带on        * 3、事件处理程序        * js document.getElementById("id").onclick = function()        * {        * //语句        * }        * jQuery:$("#id").click(function(){        * //语句        * });         */    </script></head><body><input type="button" value="按钮" id="demo"><div></div><div></div><div></div><div></div></body>

    <style type="text/css">        div{            height: 200px;            background: black;        }    </style>    <script src="jquery-1.11.1.js"></script>    <script>        //js 命名规范下划线 字母 $ 数字        //但是不能以数字作为开头        /*         var $ = "我是$";         jQuery 的两个变量 $和jQuery         jQuery 占用了我们两个变量 $和jQuery         */        /*jQuery(document).ready(function () {            jQuery("#butClick").click(function () {                //语句                jQuery("div").hide();                console.log("sss");            });        });*/        /*            jQuery入口函数和js函数            js的window.onload事件是等到所有内容以及我们的外部图片之类的文件加载完后            才会执行            jQuery的入口函数 是在html所有标签都加载完后就回去执行 jQuery比较早         */       /* window.onload = function () {            alert("#img3").width();            alert(document.getElementsByTagName("img")[2].clientWidth);        }        $(function () {            alert(document.getElementsByTagName("img")[2].clientWidth);            alert($("#img3").width());        })*/        var iQuery = function(dom){            var obj={                ready : function (func) {//指定了个属性                    console.log("woshgs");                    //判断一下 document.onload 有没有被赋值(或者说有没有这个事件)                    //1、有:接收一下旧的函数 然后 先去调用新的函数 再调用旧的函数                    //2、没有 直接赋值个onload事件                    if(typeof dom.onload == "function"){//判断类型                        var oldFunc = dom.onload;                        dom.onload = function () {                            //调用新的函数                            func();                            //调用旧的函数                            oldFunc();                        }                    }else{                        dom.onload = func;                    }                }            };            return obj;        }        iQuery(window).ready(function(){            alert("第一次调用");        });        iQuery(window).ready(function(){            alert("第e次调用");        });        /*            js创建对象            三种方式            var ob={};            var obj1 = new Object();            var obj2 = Object.create();            1跟2区别                推荐使用第一个方式            第二种方式存在效率问题因为要new对象 会涉及到原型查找的问题         */        var obj ={            ready: function(){            }        };        var obj1 = new Object();        obj1.ready = function () {        };        //Object.create();    </script></head><body><input type="button" value="du" id="butClick"><div></div></body>

    <script src="jquery-1.11.1.js"></script>    <script>        /*            符号      说明          用法            #id     Id选择器       #id{color:red;}            .class  类选择器        .class{//}            Element 标签选择器       P{//}            *       通配符选择器      配合其他选择器来使用            ,       并集选择器        div,p{}            空格     后代选择器       div span{} 选择div下面所有后代的span元素            >       子代选择器       div>span{} 仅span改变 span内部的不同于span的不变            +       紧邻选择器       div+p 选择div紧挨着的p元素         */        $(document).ready(function () {            //#id选择器            //js document.style.backgroundColor = ""; js 中没有横线 所以用大写替换横线            //设置被选择的元素的样式属性            //$("#b03").css("background","red");            //获取被选择元素的样式属性            /*var bg = $("#b03").css("color");            console.log(bg);*/            //$(".team").css("background","red");            //隐式迭代 自己内部循环            //$("li").css("color","red");            //jQuery的一个特点 隐式迭代            //$("*").css("font-size","25px");            //并集选择器            $(".team,div").css("background","blue");            $("#b03").css({                "color":"red",                "font-size":"22px"            });        })        /*            jQuery基本选择器            符号          说明                          用法            $("#demo")   选择id为demo的第一个元素        $("#demo").css("background","red");            $(".team")   选择所有类名(样式名)为team的元素  $(".team").css("background","red");            $("div")     选择所有标签名字为div的元素      $("div").css("background","red");            $("*")       选择所有元素 少用或配合其他选择器来使用  $("*").css("background","red");            $(".team,div") 选择多个指定的元素 这个地方是选择了.team 和div元素   $(".team,div").css("background","red");            规律 $(selector).css("background","red");         */    </script></head><body><!--ul>li{兄弟$}*8 按顺序生成8个 按下tab键 --><ul>    <li class="team">兄弟1</li>    <li>兄弟2</li>    <li id="b03">兄弟3</li>    <li class="team">兄弟4</li>    <li>兄弟5</li>    <li class="team">兄弟6</li>    <li>兄弟7</li>    <li>兄弟8</li></ul><div>    我是谁</div>

阅读全文

0 0

jqueryday02(jQuery基本使用特性 一些设置方法 基本样式设置)

jqueryday02(jQuery基本使用特性一些设置方法基本样式设置)