渡课日记8.6

一、学习内容

**1.jQuery 的原理、语法、使用方法;
2.jQuery效果、jQuery HTML 操作**


二、代码编辑

例1:


<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <script type="text/javascript" src="doke1.js">script>
head>
<body>

    <h1 id="hn">Hello,jQuery!h1>
    <script type="text/javascript">
        $("hn").innerHTML = "你好,jQuery";
        $("hn").style.color = "red";


    script>
body>
html>

例2:


<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.js">script>

    <script type="text/javascript">
        $(function() { 
        $("#hn").html("你好,jQuery").css("color","red");
        $(".url li:eq(1)").css("font-size","20px").css("color","red"); //li:eq(1) 这个指的是第二Li元素 ,所以是从0开始的
        $("a[href*='dodoke.com']").css("color","red");
        $(".url li:first").click(function() { alert("click me");})
        });
    script>
head>
<body>
    <h1 id="hn">Hello,jQuery!h1>
    <hr>
    <ul class="url">
        <li>第1章li>
        <li>第2章li>
        <li>第3章li>
        <li>第4章li>
        <li>第5章li>
        <li>第6章li>
        <li>第7章li>
    ul>


    <a href="http://www.dodoke.com/xxxx1">dodoke1a<a href="http://www.dodoke.com/xxxx2">dodoke2a<a href="http://www.dodoke.com/xxxx3">dodoke3a<a href="http://www.baidu.com/xxxx4">dodoke4a<a href="http://www.dodoke.com/xxxx5">dodoke5a<a href="http://www.dodoke.com/xxxx6">dodoke6abody>
html>

例3:


<html>
<head>
    <title>title>
    <meta
    <script type="text/javascript" src="jquery-3.3.1.js">script>
    <style type="text/css">
        #dv {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: grey;
        }
    style>
    <script type="text/javascript">
        $(function(){
            var showFlag = true;
            $(".ahide").click(function(){
                // if (showFlag) {
                //  $("#dv").hide(1000);
                //  showFlag = false;
                //  $(".ahide").html("显示");
                // } else {
                //  $("#dv").show(1000);
                //  showFlag = true;
                //  $(".ahide").html("隐藏");
                // }
                $("#dv").toggle(1000, function(){
                    alert("结束");
                });
            });

        })
    script>
head>
<body>
    <a href="#" class="ahide">隐藏a>
    <div id="dv">div>
body>
html>

例4:


<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.js">script>
    <script type="text/javascript">
        var i = 1;
        var addLi = function(type) {
            if(type == 1) {
                $("#ull").prepend("
  • 第"+(i++)+"章 
  • "
    ); } if(type == 2) { $("#ull").append("
  • 第"+(i++)+"章 
  • "
    ); } } var removeLi = function(obj) { $(obj).parent().remove(); } var emptyUl = function() { $("#ull").empty(); }
    script> head> <body> <button onclick="addLi(1);">追加一行(开头)button<button onclick="addLi(2)">追加一行(结尾)button<button onclick="emptyUl()">清空button> <ul id="ull">ul> body> html>

    三、学习心得

    只有很好的掌握了前面的内容才能在学习jQuery时更加的透彻。

    你可能感兴趣的:(学习日记)