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

最新推荐文章于 2022-07-30 16:51:00 发布

wenchi2018

最新推荐文章于 2022-07-30 16:51:00 发布

阅读量294

点赞数

分类专栏： jquery

jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

wenchi2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqueryday02(jQuery基本使用特性一些设置方法基本样式设置)

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

扫一扫