Jquery入门一

Jquery属性操作

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

<div class="div1" con="c1"></div>

<input type="checkbox" checked="checked" name="">是否可见
<input type="checkbox" name="">是否可见

<input type="text" value="123" name="">

<div value="456">

</div>


<div id="di1">
111
    <p>ppppp</p>
</div>

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    //属性操作

    //判断标签是否有某个属性，返回True或false
    // console.log($("div").hasClass("div1"))
    
    //console.log($("div").attr("con","c2"))

    // console.log($(":checkbox:first").attr("checked"))
    // console.log($(":checkbox:last").attr("checked"))

//如果是固有属性尽量用prop，如果是自己定义的属性尽量用attr
    // console.log($(":checkbox:first").prop("checked","checked"))
    // console.log($(":checkbox:last").prop("checked"))

    // console.log($("div").prop("class"))
    
        //文本操作 固有操做

    // console.log($("#di1").html())
    //console.log($("#di1").text("<h1>Tang<h1>"))
    //console.log($("#di1").html("<h1>Tang<h1>"))
    //
    
    //val值操作 固有操作
    console.log($(":text").val())
    //console.log($(":text").next().val())
    $(":text").val("789")

    $("div").css({"color":"red","background-color":"green"})
</script>

</body>
</html>

View Code

Jquery循环

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

<p>0000<p>
<p>0000</p>


<script src="jquery-1.12.4.min.js"></script>

<script type="text/javascript">

arr=[11,22,33]

// for (var i=0;i<arr.length;i++){
//     $("p").eq(i).html(arr[i])
// }

//jquery遍历数组 方法一
// $.each(arr,function(x,y){
//     console.log(x) 下标
//     console.log(y) 当前值
// })


//方式二
$("p").each(function(){
    console.log($(this))//$this代指当前标签对象
    $(this).text("hello");
})

</script>


</body>
</html>

View Code

Jquery 实现左侧菜单点击隐藏事件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .outer{
            height: 1000px;
             100%;
        }

        .menu{
            float: left;
            background-color: beige;
             30%;
            height: 500px;

        }

        .content{
            float: left;
            background-color: rebeccapurple;
             70%;
            height: 500px;
        }

        .title{

            background-color: aquamarine;
            line-height:40px;
        }

        .hide{
            display: none;
        }
    </style>

</head>
<body>

<div class="outer">

    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>

    <div class="content"></div>

</div>

<script src="jquery-1.12.4.min.js"></script>
<script>
function show(self) {
    // body...
    $(self).next().removeClass("hide");
    $(self).parent().siblings().children(".con").addClass("hide")
}
</script>

</body>
</html>

View Code

Jquery实现模态对话框

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .content{
            height: 1800px;
            background-color: pink;
        }

        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
            //opacity 透明度
        }

    .model{
         200px;
        height: 200px;
        background-color: bisque;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;

        /*height: 50%*/
    }

    .hide{
        display: none;
    }
    </style>

</head>
<body>

<div class="content">
    <button onclick="func()">show</button>
    hello world
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">show</button>
</div>

<script type="text/javascript">

function func (argument) {
    var ele_shade=document.getElementsByClassName('shade')[0]
    var ele_model=document.getElementsByClassName('model')[0]

    ele_model.classList.remove("hide")
    ele_shade.classList.remove("hide")
}

function cancel(){
    var ele_shade=document.getElementsByClassName("shade")[0]
    var ele_model=document.getElementsByClassName("model")[0]

    ele_model.classList.add("hide")
    ele_shade.classList.add("hide")
}
</script>
</body>
</html>

View Code

如果我失败了,至少我尝试过,不会因为痛失机会而后悔