/*页首的跳转连接，*/

jQuery与Ajax入门 


jQuery与Ajax入门慕课学习笔记
加油吧

 

 1.了解JavaScript库

 

 

2介绍jQuery

 

 

3.Web页面开发的两个要素

　　在使用HTML开发页面时，有两个基本点

　　　　选择HTML页面上哪些元素

　　　　在这些元素上做哪些动作

 

4.jQuery选择器

　　

 

 

 

 

 

 

 

 

 

 5.操作元素属性

 

 

 

    <script type="text/javascript">
    //获取属性值只存储的是第一个符合条件的属性
    //设置的时候是全部设置
    //移除是全部移除
        var href_attr=$("a[href*='163']").attr("href");
        alert(href_attr);
        $("a[href*='163']").attr("href","http://www.163.com");
        var attr=$("a").attr("href");
        alert(attr);
        $("a").removeAttr("href");
        </script>

 

 

 

    <script type="text/javascript">
    //# id选择器  .class选择器 
    //$("select").addClass("highlight");
    //组合选择器.class a #btnSelect
    //后代选择器 A B  子选择器 A>B 
    //兄弟选择器 A~B，是选择A后面的平级B，之前的选不到
    //属性选择器a[href='xxx'] ^开头 $结尾 *包含
        document.getElementById("btnSelect").onclick=function(){
            var selector = document.getElementById("txtSelector").value;
            //jquery的选择器方法
            //选择器表达式
            $("*").removeClass("highlight");
            $(selector).addClass("highlight");
        }
    </script>

 

 

 

<script type="text/javascript">
    $("input[name='uname']").val("admin");
    var v=$("input[name='uname']").val();
    alert(v);
    //text与html方法最大的区别在于对于文本中的html标签是否进行转义
    //$("span.myclass").text("锄禾日当午，汗滴禾下土");
    $("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>");
    
    var c=$("span.myclass").text();
    alert(c);
    </script>

6.jQuery事件处理方法

 

 

 

 

    <script type="text/javascript">
    alert("欢迎光临");
    $("#blue").click(function(){
        $("div.div2").css("background-color","blue");
        $("div.div2").text("蓝色背景");
    });
    $("#green").click(function(){
        $("div.div2").css("background-color","green");
        $("div.div2").text("绿色背景");
    });
    
    $("input[name='color']").keypress(function(event){
        if(event.keyCode==66){
            $("div.div2").val("");
            $("div.div2").css("background-color","blue");
        }else if(event.keyCode==71){
            $("div.div2").val("");
            $("div.div2").css("background-color","green");
        }
    })
        
    </script>

 

 

    $(function(){
        $.ajax({
            "url" : "/ajax/channel",
            "data" : {"level" : "1"},
            "type" : "get" , 
            "dataType" : "json" , 
            "success" : function(json){
                console.log(json);
                for(var i = 0 ; i < json.length ; i++){
                    var ch = json[i];
                    $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                }
            }
        })
    })}

 

7.Ajax介绍

 

 

 

 

    <script>
        $("#btnLoad").click(function(){
            //创建XmlHttpRequest对象
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            console.log(xmlhttp);
            //发送Ajax请求
            xmlhttp.open("GET","http://localhost:8080/ajax/content","true");
            xmlhttp.send();
            //处理服务器响应
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var t=xmlhttp.responseText;
                    alert(t);
                    $("#divContent").html(t);
                }
            }
        })
    </script>

 

8.jQuery与Ajax

 

get()\post():https://www.w3school.com.cn/jquery/ajax_get.asp

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            "url" : "/ajax/channel",
            "data" : {"level" : "1"},
            "type" : "get" , 
            "dataType" : "json" , 
            "success" : function(json){
                console.log(json);
                for(var i = 0 ; i < json.length ; i++){
                    var ch = json[i];
                    $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                }
            }
        })
    })
    
    $(function(){
        $("#lv1").on("change" , function(){
            var parent = $(this).val();
            console.log(parent);
            $.ajax({
                "url" : "/ajax/channel" , 
                "data" : {"level" : "2" , "parent" : parent},
                "dataType" : "json" , 
                "type" : "get" ,
                "success" : function(json){
                    console.log(json);
                    //移除所有lv2下的原始option选项
                    $("#lv2>option").remove();
                    for(var i = 0 ; i < json.length ; i++){
                        var ch = json[i];
                        $("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
                    }
                }
            })
        })
    })

</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>

 

posted @ 2020-02-13 00:48  奇奇锋  阅读(116)  评论(0)    收藏  举报
/* 看板娘 */