jquery代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#btn")[0].addEventListener('click', function () {
                var li = $("<li>+++++</li>");
                $("ul").prepend(li); // 内部添加并且放到内容的最前面
            })

            //真正的时间注册机制：
            $("#btn").on('click', function () {
                alert("你好，世界");
            })
            /* 
            - on(): 用于事件绑定，目前最好用的事件绑定方法
            - off(): 事件解绑
            - trigger() / triggerHandler(): 事件触发
             */

            //防止坍塌：overflow：hidden

            //防止冒泡：就是点击层级都响应
            $("#out").on('click', function (ev) {
                console.log('out')
            })
            $("#inn").on('click', function (ev) {
                console.log('inn')
                ev.stopPropagation();//取消冒泡
            })


            //阻止对象的默认行为：return false；
            $("form input").on('click', function () {
                console.log("xxx")
                return false;
            })


        })
    </script>
</head>

<body>
    <form action="http://www.baidu.com" method="get">
        <input type="submit" value="提交">
    </form>
    <button id="btn">添加</button>

    <div id="out" style="border: red 1px solid;width: 400px;height: 400px;">
        <div id="inn"
            style="border: blueviolet 1px solid;width: 100px;height: 100px;margin: 50px auto;overflow: hidden;">

        </div>
    </div>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            //遍历：$('选择器').each(function(index,value){})//节点对象value需要转化为jQuery对象
            //便来二：$.each(object,function(index,value){})//普通对象
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function (i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function (i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</head>

<body>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery入门</title>
    <script src="./jq/jquery-3.3.1.js"></script>
    <style>
        ul>li:first-child {
            color: red;
        }

        .befor{
            color: red;
        }
        .afer{
            color: darkorange;
        }
        .com{
            font-size: 20px;
        }
    </style>
    <script>
        //入口程序函数
        //原始：  document.addEventListener("DOMContentLoaded", function () {})
        //jq优化：$(function(){  })
        $(function () { //$代表的是jQuery对象
          /*   //  $('#div1')//  得到jquery对象  伪数组
            var dov = $('#div1')
            console.log(dov)
            //jQuery对象转dom对象
            var htm = dov[0];
            console.log(htm);

            //dom转化为jquery对象
            var dov2 = document.getElementById("div1");
            var jq = $(dov2);

            // ===================================
            $('ul>li:first').css("color", 'red');//过滤器
            $("ul li:first").css("color", "red");//子代
            $("ul li:eq(2)").css("color", "blue");//从0开始计数
            $("ol li:odd").css("color", "skyblue");//奇数
            $("ol li:even").css("color", "pink");//偶数

            //设置兄弟节点，伪数组，隐式迭代。。。
            $(".lis1").siblings().css('color', 'blue'); */
/* 
            // 1.添加类
            $("div").addClass("current");

            // 2.删除类
            $("div").removeClass("current");

            // 3.切换类
            $("div").toggleClass("current"); */


            // $('ol li:eq(0)')   jQuery对象。。。 |||$('ol li:eq(0)')[0]  jquery对象转化为了dom对象
            $('ol li:eq(0)')[0].addEventListener('click',function(){
               // $(this).removeClass('afer').addClass('befor')//先移除原有的，然后再添加新样式
               // $(this)将dom对象转为jquery对象，调用jquery的增强方法。。。
               $(this).toggleClass('afer')//有无之间相互替换。。

               $("#div1").attr("align",'center')//设置属性
            })


        })
    </script>
</head>

<body>
    <div id="div1">
        此生多败笔
    </div>
    <ul>
        <li class="lis1">王刚</li>
        <li>王尼玛</li>
        <li>瞎子</li>
    </ul>
    <ol>
        <li class="afer com">王刚</li>
        <li>王尼玛</li>
        <li>瞎子</li>
    </ol>


</body>

</html>

 

posted on 2020-09-09 23:09  白嫖老郭  阅读(72)  评论(0)    收藏  举报

导航