菜单 搜索
首页 前端知识 jQuery入门

jQuery入门

2024-01-31 12:01:06 前端知识 前端哥 361 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
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

02_jQuery与Ajax

2024-02-12 14:02:05

banner轮播图以及nav导航栏Jquery

2024-02-12 14:02:02

js中单竖杠‘|‘的的使用方法

2024-02-12 14:02:48

jQuery

2024-01-31 12:01:10

Java零基础教学文档第五篇：jQuery

2024-02-12 14:02:36

echarts实现动态渲染多柱图

2024-02-12 14:02:34

Echarts 设置折线图线条样式（虚线 粗细 阴影）

2024-02-12 14:02:32

springboot echarts mybatisplus 实现动态数据图（饼状，折线）

2024-02-12 14:02:22

echarts实现正负轴柱状图

2024-02-12 14:02:21

QT Echarts 联动共享数据表图 使用详解

2024-02-12 14:02:17

广告位招租：QQ85750956
大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

如何利用浏览器测试跨域

2024-02-11 10:02:28998
8

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
9

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995
10

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！