Jquery的dom操作、事件、遍历以及异步请求

Jquery的dom操作

属性操作:  attr -> attribute
   attr():设置/获取 属性值
   removeAttr():移除属性
   内容操作:
   text():往标签中插入内容(设置/获取)
   html():往标签中插入内容
   val():设置/获取 输入框的内容

代码展示：

<script>
    // 属性操作
    function fn1() {
        // 获取value属性
        // 无法动态获取到输入框中的value属性值
        var content = $("input").attr("value");
        console.log(content);
        // 设置value属性
        $("input").attr("value","nz1902 nb plus");
        //  移除value属性
        $("input").removeAttr("value");
    }

    // 内容操作
    function fn2() {
        // text() : 不能解析html标签
        // 获取标签内容
        var content = $("#spn").text();
        console.log(content);

        // 设置标签内容
        $("#spn").text("this is not span");
    }

    function fn3() {
        // html : 解析html标签
        var content = $("#spn").html();
        console.log(content);

        // 设置标签内容
        $("#spn").html("<font color='#00bfff'>this is not span</font>");
    }

    function fn4() {
        // 可以动态获取到输入框中的value属性值
        // val(): 设置/获取 文本输入框的内容
        // 获取文本内容 本质上操作的value属性值！！
        var content = $("input").val();
        console.log(content);

        $("input").val("this is a input");
    }
</script>
<input type="text" value="abc"><br/>
<span id="spn">这是一个span操作</span><br/>
<button onclick="fn1()">操作1</button><br/>
<button onclick="fn2()">操作2</button><br/>
<button onclick="fn3()">操作3</button><br/>
<button onclick="fn4()">操作4</button>

Jquery事件

监听页面加载

代码展示：三个版本

<script>
    // js监听
    window.onload =function () {
        console.log("页面加载完成1~~");
    }

    // jquery方式：完整版
    $(document).ready(function () {
        console.log("页面加载完成了2~~~~");
    })

    // jquery方式: 简写版
    $(function () {
        console.log("页面加载完成了3~~~~")
    })
</script>

输入框获取焦点时,输入框内容置为空;失去焦点时,输入内容设置为"请输入用户名

代码展示：

 <script>
    $(function () {
        $("#name").focus(function () {
            // 当input获取焦点，本方法执行
            console.log("获取焦点");
            var content = $("#name").val();
            if (content == "请输入用户名") {
                $("#name").val("");
            }
        })

        $("#name").blur(function () {
            // 当input失去焦点，本方法执行
            console.log("失去");
            var content = $("#name").val();
            if (content == "") {
                $("#name").val("请输入用户名");
            }
        })
    })
</script>

<input type="text" id="name" value="请输入用户名">

Jquery的遍历

1.JS遍历方式

代码展示：

 <script>
		 $(function () {
        		// js遍历
        		$("#btn1").click(function () {
           		 var lis = document.getElementsByTagName("li");
           		 for (var i = 0; i < lis.length; i++) {
                		var li = lis[i];
               		 console.log(li.innerHTML);
          		  }
     		   })
		 }
 </script>
<ul>
	<li title='苹果11' class="li1">苹果</li>
	<li title='橘子22' class="li2">橘子</li>
	<li title='菠萝33' class="li3">菠萝</li>
</ul>
<button id="btn1">操作1</button>
<button id="btn2">操作2</button>
<button id="btn3">操作3</button>

2.Jquery遍历方式

<script>
    $(function () {
         // jquery 遍历方式1
        $("#btn2").click(function () {
            var lis = $("li");
            lis.each(function (index,ele) {
                // index:元素的脚标
                // ele: js对象
                console.log(index);
                console.log(ele.innerHTML);
                console.log($(ele).html());
                // this:当前遍历的元素的js对象
                console.log($(this).html());
            })
        })

        // jquery遍历方式2
        $("#btn3").click(function () {
            var lis = $("li");
            $.each(lis,function (index,ele) {
                console.log(index);
                console.log(ele.innerHTML);
                console.log($(ele).html());
                console.log($(this).html());
            })
        })
    })

</script>

Jquery的异步请求

get方式

$.get(url,data,callback,type):使用GET 来加载远程数据 
url:请求的路径 data:请求的参数 
callback: 当数据被加载时，所执行的函数 
type: 被返回的数据的类型 (html,xml,json,jasonp,script,text)

post方式

$.post(url,data,callback,type):使用POST 来加载远程数据 
url:请求的路径 
data:请求的参数 
callback: 当数据被加载时，所执行的函数 
type: 被返回的数据的类型 (html,xml,json,jasonp,script,text)

ajax方式

$.ajax({
	url:url, 
	data:data, 
	success:success, 
	dataType:dataType, 
	type:type
 }); 
url:请求的路径 
data:请求的参数 
success:服务器响应成功 
dataType:响应的数据的类型 
type:请求方式