zoukankan html css js c++ java

Jquery练习

text()、css（）、val（）、html（）的应用

text() - 设置或返回所选元素的文本内容

val() - 设置或返回表单字段的值（一般获取用户输入的值）

html()-可以解析标签（所以可以利用html()动态创建元素）

例如：

$("#btn2").click(function(){
  $("#test2").html("<a href="http://www.baidu.com">百度一下</a>");
});

设置单个css的格式为：(jquery对象).css("fontSize","15px");

设置多个css的格式为：

(jquery对象).css({

"fontSize":"15px",

"backgroundColor":"red"

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/j1.js"></script>

</head>
<body>
<p id="p1" class="class1"> hello</p>
<p id="p2">hello</p>
<p id="p3">hello</p>
<p id="p4">hello</p>
<p id="p5">hello</p>

<button >按键</button>
</body>
</html>

j1.js

$(document).ready(function(){

    alert("加载完毕");
    // $("p").click(function () {
    //     $(this).hide();
    // });
    $("button").click(function () {
        // $("p").text("p元素内容被修改");
         $("#p1").text("id为p1的元素内容被修改");
        //     $(".class1").text("类名为class1的元素被修改");//innerHTML
    });
});

效果：点击按钮改变<p>的innerHTML

hide()和show()的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/moveAction.js"></script>
</head>
<body>
<!--<p>hello </p>-->
<!--<button id="bid">隐藏</button>-->
<!--<button id="bid2">显示</button>-->
<!--<button id="bid3" onclick="show_hide()">隐藏/显示</button>-->
<!--</body>-->

<script>
    for(var i=0;i<5;i++){
        var d=document.createElement("div");
        d.style.margin="5px";
        d.style.background="red";
        d.style.height="100px";
        d.style.width="100px";
        d.style.cssFloat="left";//很关键
        // d.style.background=red;
        // d.style.height=100px;
        // d.style.width=100px;
        $("body").append(d);

    }
    $("div").click(function () {
       $(this).hide(1000,function () {//隐藏
           $(this).remove();//删除
       })
    });

</script>
</body>
</html>

moveaction.js

$(document).ready(function () {
   // $("#bid").on("click",hide);
   // $("#bid2").on("click",show);
   // $("#bid3").on("click",show_hide);

});
function hide() {
    $("p").hide(1000);//动画执行时长
}
function show(){
    $("p").show(1000);
}
function show_hide(){
    $("p").toggle(1000);//一个按钮控制显示和隐藏
}

效果：点击一个div区域后，div区域消失，其它div区域向左浮动

设置属性 - attr()

设置单个和设置多个属性和设置多个css的格式一致

on:绑定事件（同bind）

off:解除事件

鼠标常用事件：

mouseenter

mouseleave

mouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/eventMethod.js"></script>
</head>
<body>
<button id="bid">按钮</button>
<p id="p2">hello</p>
<p id="p3">hello</p>
<p id="p4">hello</p>
<p id="p5">hello</p>
<!--<input id="inid" type="text" value="百度一下">-->
<a id="aid" href="http://www.baidu.com">百度或者blibli</a>

</body>
</html>

eventMethod.js

$(document).ready(function () {
   // $("button").click(function () {//单击
   //    $(this).hide();
   // });
   //  $("button").dblclick(function () {//双击
   //     $(this).hide();
   //  });
   //  $("button").mouseenter(function () {//鼠标在按钮上
   //      $(this).hide();
   //  });
   //  $("button").mouseleave(function () {
   //     $(this).hide();
   //  });
   //  $("p").click(function () {//点击删除下面的向上滑动
   //      $(this).slideUp();
   //  });
   //  $("#bid").on("click",clickEvent);//添加事件(on可以换为bind)
    // $("#bid").off("click",clickEvent);//解除事件（off可以换为unbind）
    // $("#bid").off("click");//解除button上的所有点击事件

    // $("#inid").mouseenter(function () {//修改输入框的值
    //    $(this).val("百度两下");
    // });
    // $("#inid").mouseleave(function () {
    //     $(this).val("百度一下");
    // })
    // $("#aid").click(function(){//修改href
    //     $("#aid").attr("href","http://www.blibli.com");
    //
    // });

    $("#aid").click(function () {//添加或者修改多个属性
       $(this).attr({
            "href":"http://www.blibli.com",
             "title":"sbsbsb"
           });
    });


});

function clickEvent(){
    alert("绑定事件1");
}

删除相应属性的方法是：removeAttr()

例如：从任何 p 元素中移除 id 属性：

$("button").click(function(){
  $("p").removeAttr("id");
});

animate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<style>

    div{
        position:absolute;
        paddingLeft:above-level;
        height:100px;
        width:100px;
        marginRight:right;
        backgroundColor:skyBlue;
    }


</style>
<div>123</div>

<script>
    $("button").click(function(){
        $("div").animate({
            left:'250px',
            opacity:'0.2',
            height:'150px',
            '150px',
            fontSize:'3em'
        },5000);//5000为动画执行时长，这里也可以将5000改为一个会回调函数
    });
</script>
</body>
</html>

效果：

缓缓向斜右下移动

如果希望一个事件触发多个动画可以这样写，jQuery 提供针对动画的队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
});

删除和添加元素

通过 var $a=$("<a href="http://www.baidu.com">百度一下</a>")动态创建的标签存在于内存中要显示在页面必须追加append

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/add_remove.js"></script>
</head>
<body>
<!--<p id="pid">12345</p>-->
<!--<button onclick="appendText()">按键</button>-->
<!--<p>我被删除</p>-->
<!--<button id="bid">按键</button>-->
<div id="did" style="height: 200px; 200px;border: 1px solid black;background-color: aqua">
    hello
    <p>p1</p>
    <p>p2</p>
    hello
</div>
<button id="bid">删除</button>
</body>
</html>

add_remove.js

$(document).ready(function () {

    /**append后面追加
     * prepend前面插入
     *before前面插入(插入内容会换行)
     *after后面追加
     */
    //$("#pid").append("666");
    // $("#pid").prepend("0");
    // $("#pid").before("0");

    /**
     * remove 删除当前所有区域的东西（包括样式）
     * empty 删除当前区域的子元素
     */
    // $("#bid").click(function () {
    //     $("p").remove();
    // })
    $("#bid").on("click",remov);//添加事件

});

function appendText() {
    /**
     * html jquery js
     */
    var text1 = "<p>p1</p>";
    var text2 = $("<p></p>").text("p2");
    var text3 = document.createElement("p");
    text3.innerHTML="p3";
    $("body").append(text1,text2,text3);
}

function remov() {
    // $("#did").remove();
    $("#did").empty();
 
}

效果：

empty（）效果：

remove()效果（只剩下按钮）：

slideUp()、slideDown()、slideToggle()

带toggle别问，问就是开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/action3.js"></script>
</head>
<style>
    #did1,#did2,#did0,#toggle{
        padding: 5px;
        text-align: center;
        background-color: aqua;
        border: solid 1px indianred;
    }
    #did2{
        padding: 50px;
        display: none;
    }
</style>
<body>
<div id="did0">隐藏</div>
<div id="did1">出现</div>
<div id="toggle">开关</div>
<div id="did2">hello world</div>
</body>
</html>

action3.js

$(document).ready(function () {
    $("#did1").on("click",slideDown);
    $("#did0").on("click",slideUp);
    $("#toggle").on("click",slideToggle);
});

function slideDown(){
    $("#did2").slideDown(1000);
}
function slideUp(){
    $("#did2").slideUp(1000);
}
function slideToggle(){
    $("#did2").slideToggle(1000);
}

效果：

点击出现：

fadeIn()、fadeOut()、fadeToggle()、fadeTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/action2.js"></script>
</head>
<body>
<button id="bid1" >fadeIn</button>
<button id="bid2">fadeOut</button>
<button id="bid3">fadeToggle</button>
<button id="bid4">fadeTo</button>
<div id="did1" style="background-color: aqua; margin: 2px;  100px;height: 100px "></div>
<div id="did2" style="background-color: indianred; margin: 2px;  100px;height: 100px "></div>
<div id="did3" style="background-color: blue; margin: 2px;  100px;height: 100px "></div>
</body>

</html>

action2.js

$(document).ready(function () {

//alert("555");
        /**
         * fadeIn:缓慢显示
         * fadeOut:缓慢消失
         * fadeToggle：缓慢显示或者消失开关
         * fadeTo:设置透明度
         */
    $("#bid1").on("click",fadeIn);
    $("#bid2").on("click",fadeOut);
    $("#bid3").on("click",fadeToggle);
    $("#bid4").on("click",fadeTo);
}
)


function fadeIn(){
    $("#did1").fadeIn(1000);
    $("#did2").fadeIn(1000);
    $("#did3").fadeIn(1000);
}
function fadeOut() {
    $("#did1").fadeOut(1000);
    $("#did2").fadeOut(1000);
    $("#did3").fadeOut(1000);
}

function fadeToggle() {
//     $("#did1").fadeToggle(1000);
//     $("#did2").fadeToggle(1000);
//     $("#did3").fadeToggle(1000);
    $("div").fadeToggle(1000);
}

function fadeTo() {
    $("div").fadeTo(1000,0.5);//前面是执行时间，后面是透明度占比
}

效果：

点击fadeTo后：

点击fadeIn缓慢出现

点击fadeOut缓慢消失

不一样的烟火

查看全文

相关阅读:
刨析Maven（对pom.xml配置文件常用标签的解析）
sublime text 3 使用技巧
 CSS3之渐变
 CSS3之过渡
 定位
 Java中的正则表达式
 CSS3之转换
 CSS布局
 导航条菜单制作总结
 Transition

原文地址：https://www.cnblogs.com/cstdio1/p/11838578.html