首页 前端知识 jQuery入门

jQuery入门

2024-01-31 12:01:06 前端知识 前端哥 335 641 我要收藏

jQuery

jQuery是继prototype之后一个优秀的开源的JavaScript代码库(或JavaScript框架),它封装JavaScript常用的功能代码。我们首先来看看jquery的核心特点:

(1) 具有独特的链式语法,可以把多个操作写在一行代码里,更加简洁
(2) 拥有大量的选择器,不仅有高效灵活的css选择器【id,类,元素】,并且可对CSS选择器进行扩展
(3) 拥有便捷的插件扩展机制和丰富的插件(树形菜单、日期控件、图片切换插件、弹出窗口等)
(4) 这个就厉害了,jQuery兼容各种主流浏览器,包括互联网十大垃圾之一IE6.
(5) 很多API都方法化了

jQuery的核心思想:(write less,do more)写得更少,做得更多

引入jQuery

 <script src="./dist/js/jQuery.js"></script>
  • 编写jQuery入口函数即页面加载事件
1.jQuery页面加载事件都会执行,而js中的页面加载事件只会执行最后一个(多个$(function(){})中的代码都会执行,多个window.onload只会执行最后一个)
2.jQuery页面加载事件优先执行($(function(){})比window.onload加载快)
	注意:jQuery3.x的不一定比window.onload加载快
    <script>
        //js中的页面加载事件:当整个页面加载完成(节点,样式,图片等)之后才会执行里面的代码
        window.onload = function(){
            alert(111);
        }
        window.onload = function(){
            alert(222);
        }
        //jQuery页面加载事件:加载时机是节点加载完成就执行了
        $().ready(function(){
            alert(333);
        })
        jQuery(function(){
            alert(444);
        });
        //333 - 444 - 222
    </script>

jQuery===$

在Js中,=先比较类型,再比较值,而jQuery= 返回值为 t r u e 。所以使用 返回值为true。所以使用 返回值为true。所以使用的地方就可以使用jQuery,但是必须jQuery严格区分大小写,写成jquery都不行

之所以这样做得原因是因为其他的js框架也可能使用$符号,那么这时就可以使用jQuery来区分

DOM对象与jQuery对象转换

  • dom对象: 用js代码获取的对象就是dom对象:通过id,class,标签名等,this,window- dom对象

  • jQuery对象: 通过 ( ) 和选择器获取的对象就是 j Q u e r y 对象(通过选择器和 ()和选择器获取的对象就是jQuery对象(通过选择器和 ()和选择器获取的对象就是jQuery对象(通过选择器和函数获取的节点对象。实质是通过jQuery包装DOM对象后产生的对象)
    建议:jQuery对象接收的时候变量名前加上$符号
    注意:1. dom对象不能调用jQuery对象的api

      		  2. jQuery对象也不能调用dom对象的api
    
  • 将Dom对象转换成jquery对象:

$(dom对象)
例如:var $obj = $(obj);
  • 将jQuery对象转换成dom对象:
var obj = $obj.get(0); 
var obj = $obj[0,1,2...];

注:dom对象与jQuery对象的方法和属性不能混淆,jQuery对象不能调用dom对象的属性和方法

<body>
    <div id="d1">易烊千玺</div>
    <script>
        $(function(){
            //jQuery对象相当于对dom对象的封装,可以看成将dom对象的数组
            var div = document.getElementById("d1");
            //dom对象 - jQuery对象
            var $div1 = $(div);
            $div1.css("color","red");
            //$div1.style.color = "red"; //jQuery对象不能调用dom对象的API

            var $div = $("div");  //[dom对象1]
            //jQuery对象 - dom对象
            var div1 = $div[0]// = $div.get(0)
            div1.style.backgroundColor = "pink";
        });
    </script>
</body>

jQuery选择器

  • 基本选择器

    Id选择器:			id="d1"			#d1
    类/class选择器:		class="c1" 		.c1
    元素选择器:			p				p
    *选择器:			代表所有/一般不使用
    选择器分组/分组选择器:#d1,.c1,p
    
  • 基本过滤选择器

    :first			-	第一个
    :last			-	最后一个
    :eq(index)		-	指定索引的
    
  • 属性选择器

    [属性名]			-	  有指定属性的
    [属性名="属性值"]	  -		有指定属性和属性值的
    
  • 层次选择器 - 空格(略)

  • 等等(都和js的选择器差不多)

<body>
    <!-- ul>li*8 -->
    <ul>
        <li>张三丰</li>
        <li>张三丰</li>
        <li>张三丰</li>
        <li id="d1">张三丰</li>
        <li>张三丰</li>
        <li id="d2">张三丰</li>
        <li>张三丰</li>
        <li>张三丰</li>
    </ul>
    <script>
        $(function(){
            //ul下所有的li
           $("ul li").css("background-color","gold");
           //第一个li
           $("li:first").css("color","red");
           //最后一个li
           $("li:last").css("color","lime");
           //下标为1的li
           $("li:eq(1)").css("color","gray");
           //有id属性的li
           $("li[id]").css("color","yellow");
           //有id=d2的li
           $("li[id='d2']").css("color","blue");
        });
    </script>
</body>

jQuery事件绑定/注册

  • 绑定事件
// 主要用第一种,简单
$obj.事件名称(function(){
	//逻辑代码
});
$obj.on("事件名称", function(){
	//逻辑代码
});
$obj.bind("事件名称", function(){
	//逻辑代码
});
  • 取消事件
$obj.off("事件名称");
$obj.unbind("事件名称");
注意:如果取消事件时不写时间名称,表示取消所有事件
<body>
    <div style="height: 200px;width: 200px;background-color: aqua;">
        王天霸
    </div>
    
    <script>
        $(function(){
            //绑定事件
          $("div").click(function(){
            //alert(this.innerHTML);
            //this是dom对象 - 点的是哪一个对象就是谁
            alert($(this).text());
          })
         //绑定鼠标移入事件
          $("div").on("mouseover",function(){
            $(this).css("background-color","yellow");
          })
            //绑定鼠标移出事件
          $("div").bind("mouseout",function(){
            $(this).css("background-color","aqua");
          })
          //取消事件
          //$("div").off('click');
          //$("div").unbind('mouseout');
          $("div").off();//取消所有事件

        });
    </script>
</body>

jQuery操作内容和样式

  • 文本操作

    • API
    html(): 设置或者获取双标签中的的html文本
    text():设置或者获取双标签中的纯文本
    val():设置和获取有value属性的标签的value属性值
    	有value属性值的元素【大多数单标签都有】:input【按钮,文本框等】、select中option等
    	没有value属性值的元素【大多数双标签没有】:div、hn、span、a、p等
    
  • 属性和样式操作

    • API
    操作样式:css(),addClass(),removeClass()
    操作属性:
    	attr():操作【设置或获取】非boolean属性值的属性
    	prop():操作【设置或获取】boolean属性值的属性(checked单选框复选框,selected下拉框)
    	data():h5出的API,可以自定义属性data-属性名="属性值",然后用data("属性名")获取可以自动转换。一般用于传递数据
    		注意:要自动转换的话属性值必须是标准格式就是双引号,不能使用单引号
    	removeAttr():移除指定属性值
    
    <style>
      .c1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        border-radius: 50px;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
      }
    </style>
</head>
<body>
    <div>
      <marquee>🚗</marquee>
    </div>
    <input value="tom"/>
    
    <script>
        $(function(){
          console.log($("div").html()); //获取html文本
          $("div").html("马");//设置html文本

          console.log($("input").val());//获取value属性值
          $("input").val("jack");//设置value属性值

          //$("div").css("width","100px").css("height","100px").css("backgroundColor","gray");
          $("div").addClass("c1");
          
        });
    </script>
</body>
<body>
    性别:
    <label><input type="radio" value="f" name="sex" checked></label>
    <label><input type="radio" value="m" name="sex"></label>

    <hr/>
    爱好:
    <label><input type="checkbox" value="zq" name="hobby" checked> 足球</label>
    <label><input type="checkbox" value="lq" name="hobby"> 篮球</label>
    <label><input type="checkbox" value="ymq" name="hobby"> 羽毛球</label>

    <hr/>
    学科:
    <select>
      <option>java</option>
      <option selected>ui</option>
      <option>h5</option>
    </select>

    
    <script>
        $(function(){
            //type=radio的input - 最后一个
            $("input[type='radio']:last").prop("checked",true);
            //$("input[type='radio']:first").prop("checked",false);

            
            $("option:last").prop("selected",true);

            alert($("input:first").attr("name"));
        
        });
    </script>

</body>

json格式的数据:data()

在jQuery里面获取属性有两种:attr(),prop(),data()

HTML5增加了一项新功能是:自定义数据属性,也就是data-自定义属性。获取值的时候:

(1) 使用data获取属性值有个前提,属性名必须是data-xxx。使用data()获取属性的语法格式:jQuery对象.data("xxx")
(2) 使用attr()获取属性的语法格式:jquery对象.attr("属性名")
<body>
    <div data-obj="{'id':1,'name':'jack','age':20}">
        <h1>11</h1>
        sdd
    </div>
    
    <script>
        $(function(){
            //json对象
           var obj1 = {"id":1,"name":"jack","age":20}
           //alert(obj1.name);
           var obj2 = {"id":1,"name":"jack","address":{"street":"陕西街","no":"125号"}}
          // alert(obj2.address.street);
           var obj3 = [{"id":1,"name":"jack","age":20},{"id":2,"name":"tom","age":30}]
           //alert(obj3[1].name);

           //json格式的字符串
           var str = ' {"id":1,"name":"jack","age":20}';
           //转json对象:要求必须是标准格式 - ""
           alert(JSON.parse(str).name);

           //data-*是html5出来的属性,为了传递数据 - 自动将json格式的字符串转成json对象
           //1.申明的时候必须用data-*  2.获取的时候:data(*)
           console.log($("div").data("obj"));

        });
    </script>

</body>

元素操作

  • API

    追加:append()
    删除:remove(),删除会将当前元素和里面的所有内容删除掉
    清空:empty(),清空会保留当前元素
    

案例1:checkbox.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="./dist/js/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#checkAll").click(function(){ //全选
			$("input[name='hobbies']").prop("checked",true);
		})

		$("#checkNotAll").click(function(){ //全不选
			$("input[name='hobbies']").prop("checked",false);
		})
		//单击取反的时候
		$("#checkUnAll").click(function(){
			//将name=hobbies的所有input进行遍历
			// $("input[name='hobbies']").each(function(){
			// 	//获取每一个对象的checked属性值:true,false
			// 	var oldState = $(this).prop("checked");
			// 	//取反之后再设置回去
			// 	$(this).prop("checked",!oldState);
			// })

			var $arr = $("input[name='hobbies']");
			alert($arr.length);
			for(var i = 0;i<$arr.length;i++){
				var dom = $arr[i];
				var oldState = $(dom).prop("checked");
				$(dom).prop("checked",!oldState);
			}
		})

		$("input:last").change(function(){
			//获取自己的状态
			var myself = $(this).prop("checked");
			//把自己的状态 设置给 checkbox
			$("input[name='hobbies']").prop("checked",myself);
		})
	});

	//闭包
	function checkChange(t){
		//获取自己的状态
		var myself = $(t).prop("checked");
		//把自己的状态 设置给 checkbox
		$("input[name='hobbies']").prop("checked",myself);
	}
</script>

</head>
<body>
	<h3>请选择你的爱好:</h3>
	<div>
		<input type="checkbox" name="hobbies"/>打篮球&nbsp;
		<input type="checkbox" name="hobbies"/>踢足球&nbsp;
		<input type="checkbox" name="hobbies"/>上网&nbsp;
	</div>
	<hr/>
	<div>
		<input type="button" id="checkAll" value="全选"/>
		<input type="button" id="checkNotAll" value="全不选"/>
		<input type="button" id="checkUnAll" value="反选"/>
		<hr/>
		<input type="checkbox" onchange="checkChange(this)" id="d1"/>
		<label for="d1">全选/全不选</label>
	</div>
</body>

案例2:user.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增</title>
<script language="javascript" src="./dist/js/jquery-1.11.2.js"></script>
<script language="javascript">
	$(function(){
		//提交添加数据
		$("#btn_submit").click(function(){
			//获取输入框的value属性值
			var username = $("#username").val();
			var email = $("#email").val();
			var tel = $("#tel").val();
			//拼接4个td
			var td1 = "<td>"+username+"</td>";
			var td2 = "<td>"+email+"</td>";
			var td3 = "<td>"+tel+"</td>";
			var td4 = '<td><button οnclick="del(this)">删除</button></td>';
			//拼接tr,将4个td放进去:<tr></tr>是dom对象,只不过它不存在,需要创建
			var tr = $("<tr></tr>").append(td1).append(td2).append(td3).append(td4);
			//最后将tr装到tbody:
			$("tbody").append(tr); //append()是jQuery对象的api,参数tr可以是dom对象也可以是jQuery对象
		})

		//删除所有
		$("#btn_removeAll").click(function(){
			$("tbody").empty();
		})
	});

	function del(a){
		//a=button, a.parent=td a.parent.parent=tr
		//$(a.parentNode.parentNode).remove();
		$(a).parent().parent().remove();
		//https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add
	}
</script>
</head>
<body>
	<h3 style="text-align: center;">练习表格的增删</h3>
	<form name="userForm">
		<center>
		用户录入<br/>
		用户名:<input id="username" name="username" type="text"/>
		E-mail:<input  id="email" name="email" type="text"/>
		电话:<input id="tel" name="tel" type="text"/>
		
		<input type="button" value="提交" id="btn_submit"/>
		<input type="button" value="删除所有" id="btn_removeAll"/>
		
		</center>
	</form>
	<hr/>
	<table border="1" align="center"> 
		<thead>
			<tr>
				<th>用户名</th>
				<th>E-mail</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="userTbody">
			<!-- <tr>
				<td>tom</td>
				<td>110@qq.com</td>
				<td>119</td>
				<td><button οnclick="del(this)">删除</button></td>
			</tr> -->
		</tbody>
	</table>
</body>

jQuery遍历

  • 第一种:传统的遍历方式
var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
    alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}
  • 第二种:jQuery提供的each函数
//$obj:jquery集合对象,index遍历元素的下标(从0开始),obj表示每一个节点
$obj.each(function(this){
	alert($(this).val());
});

jQuery遍历案例代码请参照元素操作案例1的代码

jQuery发异步请求

  • 方式一

    <script>
        // get传输方式
    	$.get("url",data,callback,type);
    	// post传输方式
    	$.post("url",data,callback,type);
    </script>
    
  • 方式二

    $.ajax({
          url: "emp/list",                  //请求地址
          type: "GET",                       //请求方式
          data: "eid=1&ename=tom",         //请求参数:格式1:key=value  格式2:json格式
          success: function (result) {    //请求成功后的回调函数,result是服务器返回的数据         
          },
          async: true,                      //默认异步,可以不写,写成false,就是同步操作
          dataType: "json"                 //如果是json,服务器返回值就是json对象,直接使用
          //如果不指定dataType,就是普通文本
    });
    
  • FastMock+jQuery案例案例:

        <script>
            $(function(){
                $("input").click(function(){
                    //$.get("url",data,callback,type);
                    // $.get(
                    //     "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",
                    //     {"name":'tom'},
                    //     function(data){
                    //         console.log(data);
                    //     },
                    //     "json"
                    // )
    
                    $.ajax({
                        url: "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",                  //请求地址
                        type: "GET",                       //请求方式
                        data: "eid=1&ename=tom",         //请求参数:格式1:key=value  格式2:json格式
                        success: function (result) {    //请求成功后的回调函数,result是服务器返回的数据  
                            console.log(result);
                        },
                        dataType: "json"                 //如果是json,服务器返回值就是json对象,直接使用
                        //如果不指定dataType,就是普通文本
                    });
    
    
                })
    
            });
        </script>
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/949.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!