28.【jQuery基础】

最新推荐文章于 2022-05-15 23:11:05 发布
最新推荐文章于 2022-05-15 23:11:05 发布
阅读量256 收藏 1
点赞数 1
分类专栏： Java Web
原文链接：http://www.itheima.com/
版权

jQuery基础

概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

目前jQuery有三个大版本

  • 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，

    功能不再新增。因此一般项目来说，使用1.x版本就可以了，
    最终版本：1.12.4 (2016年5月20日)

  • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，

    功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，

    最终版本：2.2.4 (2016年5月20日)

  • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
    一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
    目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

jquery-xxx.js 与 jquery-xxx.min.js区别

  • jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
  • jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

JQ对象和JS对象区别与转换

  • JQuery对象在操作时，更加方便。

  • JQuery对象和js对象方法不通用的.

两者相互转换
jq – > js ：两种方法

  • 第一种：jq对象[索引]

  • 第二种：jq象.get(索引)

	// 通过JQuery获取名称叫做div的所有html元素对象    
	var $divs = $("div");
    alert($divs.length) // 也可当做数组使用
    // 对divs中所有的div 让其标签体变为"bbb" 使用JQuery方式
    $divs.html("bbb");
    // 转换为JS对象
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";
js – > jq :
  • $(js对象)
 	// 通过js方式来获取名称叫做div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length); // 可以将其当做数组来使用
    // 对divs中所有的div 让其标签体内容变为"aaa"
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";
        // 转换为JQ对象
        $(divs[i]).html("fff");
    }

基本操作

事件绑定

    // 获取 id = btn 的按钮
    $("#btn").click(function(){
    alert("我TM被点了");

入口函数

$(function (){ });

window.onload 和 $(function)区别

  • window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
  • $(function)可以定义多次的。

样式控制：css方法

    $("#div1").css("background-color","red");
    $("#div2").css("backgroundColor","pink"); // DOM写法

jQuery选择器

筛选具有相似特征的元素(标签)，

选择器有许多种：基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器

基本选择器

1. 标签选择器（元素选择器）：获得所有匹配标签名称的元素
  • 语法： $(“html标签名”) ，如：$("div")
<input type="button" value="改变 id 为 one 的元素的背景色为 粉色"  id="b1"/>

$("#b1").click(function () {
	$("#one").css("backgroundColor","pink");
});
2. id选择器：获得与指定id属性值匹配的元素
  • 语法： $("#id的属性值")
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 粉色"  id="b2"/>

$("#b2").click(function () {
    $("div").css("backgroundColor","pink");
});
3.类选择器：获得与指定的class属性值匹配的元素
  • 语法：$(".class的属性值")
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 粉色"  id="b3"/>

$("#b3").click(function () {
    $(".mini").css("backgroundColor","pink");
});
4. 并集选择器：获取多个选择器选中的所有元素
  • 语法：$("选择器1,选择器2....")
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的背景色为 粉色"  id="b4"/>

$("#b4").click(function () {
    $("span,#two").css("backgroundColor","pink");
});

层级选择器

1. 后代选择器：选择A元素内部的所有B元素
  • 语法：$("A B ")
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 粉色"  id="b1"/>

$("#b1").click(function () {
    $("body div").css("backgroundColor","pink");
});
2. 子选择器：选择A元素内部的所有B子元素
  • 语法：$("A > B") 【只能选择儿子，不包含孙子】
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 粉色"  id="b2"/>

$("#b2").click(function () {
	$("body > div").css("backgroundColor","pink");
});

属性选择器

1. 属性名称选择器 ：包含指定属性的选择器
  • 语法：$("A[属性名]")
<input type="button" value=" 含有属性title 的div元素背景色为 粉色"  id="b1"/>

$("#b1").click(function () {
    $("div[title]").css("backgroundColor","pink");
});
2.属性选择器：包含指定属性等于指定值的选择器
  • 语法：$("A[属性名='值']")
<input type="button" value=" 属性title值等于test的div元素背景色为 粉色"  id="b2"/>

$("#b2").click(function () {
    $("div[title='test']").css("backgroundColor","pink");
});

不包含指定属性等于指定值的选择器时：

<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为 粉色"  id="b3"/>

$("#b3").click(function () {
    $("div[title!='test']").css("backgroundColor","pink");
});
3. 复合属性选择器：包含多个属性条件的选择器
  • 语法：$("A[属性名='值'][]...")

例如：

  • 以te开始：$("div[title^='te']")
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>   

$("#b4").click(function () {
	$("div[title^='te']").css("backgroundColor","pink");
});
  • 以est结束：$("div[title$='est']")
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>

$("#b5").click(function () {
       $("div[title$='est']").css("backgroundColor","pink");
});
  • 含有es：$("div[title*='es']")
<input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>

$("#b6").click(function () {
       $("div[title*='es']").css("backgroundColor","pink");
});
  • 选取有属性id的div元素，然后在结果中选取属性title值含有“es”：$("div[id][title*='es']")
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>  

$("#b7").click(function () {
       $("div[id][title*='es']").css("backgroundColor","pink");
});

过滤选择器

1. 首元素选择器：获得选择的元素中的第一个元素
  • 语法：:first

例如：改变第一个 div 元素的背景色为 粉色

 $("div:first").css("backgroundColor","pink");
2.尾元素选择器：获得选择的元素中的最后一个元素
  • 语法：:last
 $("div:last")
3. 非元素选择器：改变不包括指定内容的元素
  • 语法：:not(selector)

例如：改变class不为 one 的所有 div 元素的背景色为 粉色

 $("div:not(.one)").css("backgroundColor","pink");
4. 偶数选择器：改变索引值为偶数的 div 元素 【偶数，从 0 开始计数】
  • 语法：:even

例如：改变索引值为偶数的 div 元素的背景色为 红色

 $("div:even").css("backgroundColor","pink");
5. 奇数选择器：改变索引值为奇数的 div 元素 【奇数，从 0 开始计数】
  • 语法：:odd
 $("div:odd")
6. 等于索引选择器：改变指定索引元素
  • 语法：:eq(index)

例如：改变索引值为等于 3 的 div 元素

 $("div:eq(3)")
7. 大于索引选择器：改变大于指定索引元素
  • 语法：:gt(index)

例如：改变索引值为大于 3 的 div 元素

 $("div:gt(3)")
8. 小于索引选择器 ：改变小于指定索引元素
  • 语法：:lt(index)
 $("div:lt(3)")
9. 标题选择器：获得标题（h1~h6）元素，固定写法
  • 语法：:header

例如：改变所有的标题元素的背景色为 粉色

 $(":header").css("backgroundColor","pink");

表单过滤选择器

1. 可用元素选择器：获得可用元素
  • 语法：:enabled

例如：利用 jQuery 对象的 val() 方法改变表单内可用 元素的值为 aaa

$("input[type='text']:enabled").val("aaa");
2. 不可用元素选择器：获得不可用元素
  • 语法：:disabled
 $("input[type='text']:disabled").val("aaa");
3. 选中选择器：获得单选/复选框选中的元素
  • 语法： :checked

例如；利用 jQuery 对象的 length 属性获取复选框选中的个数

 alert($("input[type='checkbox']:checked").length);
4. 选中选择器：获得下拉框选中的元素
  • 语法：:selected
 alert($("select > option:selected").length);

jQuery的DOM操作

内容操作

1. 获取/设置元素的value属性值：val()
var value = $("#myinput").val(); //张三
$("#myinput").val("李四");
2. 获取/设置元素的标签体内容 ：html()
  • <a><font>内容</font></a> --> <font>内容</font>
<p><a href="#">标题标签</a></p>

var html = $("#mydiv").html();  
$("#mydiv").html("<p>aaaa</p>");
3. 获取/设置元素的标签体纯文本内容 ：text()
  • <a><font>内容</font></a> --> 内容
 var text = $("#mydiv").text();

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../js/jquery-3.3.1.min.js"></script>
		<script>

			$(function () {
                // 获取myinput 的value属性值
				var value = $("#myinput").val();
				alert(value);
				// 设置myinput 的value属性值
                $("#myinput").val("李四");
                // 获取mydiv的标签体内容
				var html = $("#mydiv").html();
				alert(html);
				// 设置mydiv的标签体内容
                $("#mydiv").html("<p>aaaa</p>");
                // 获取mydiv文本内容
                var text = $("#mydiv").text();
                alert(text);
				// 设置mydiv文本内容 （<p><a href="#">标题标签</a></p>替换成为bbb）
                $("#mydiv").text("bbb");

            });

		</script>
		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="张三" /><br />
		<div id="mydiv"><p><a href="#">标题标签</a></p></div>
	</body>
</html>

属性操作

通用属性操作

1. 获取/设置/新增元素的属性：attr()
    //获取北京节点的name属性值
    var name = $("#bj").attr("name");
    //设置北京节点的name属性的值为dabeijing
    $("#bj").attr("name","dabeijing");
	//新增北京节点的discription属性 属性值是didu
    $("#bj").attr("discription","didu");
2.删除属性：removeAttr()
    //删除北京节点的name属性并检验name属性是否存在
    $("#bj").removeAttr("name");
3. 获取/设置元素的属性：prop()
    //获得hobby的的选中状态
    var checked = $("#hobby").prop("checked");
4. 删除属性：removeProp()
    //获得hobby的的选中状态
    var checked = $("#hobby").prop("checked");
5. attr和prop区别
  • 如果操作的是元素的固有属性，则建议使用prop
  • 如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

条件：div = one 样式：.second

1. 添加class属性值：addClass()
$("#one").prop("class","second");
2. 删除class属性值：removeClass()
 $("#one").removeClass("second");
3. 切换class属性：toggleClass()

  • 如果元素对象上存在class=“second”，则将属性值second删除掉。

  • 如果元素对象上不存在class=“second”，则添加

 $("#one").toggleClass("second"):
4, 通过css()获得id = one背景颜色
    var backgroundColor = $("#one").css("backgroundColor");
    alert(backgroundColor);
5.通过css()设置id = one背景颜色为绿色
 $("#one").css("backgroundColor","green");

jQuery的CRUD操作

父子关系 (内外部)

  1. append():父元素将子元素追加到末尾

    例如：对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

  2. prepend():父元素将子元素追加到开头

    例如：对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

  3. appendTo():

    例如：对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

  4. prependTo()：

    例如：对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

兄弟关系（挨着）

  1. after():添加元素到元素后边

    例如：对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系

  2. before():添加元素到元素前边

    例如：对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

  3. insertAfter()

    例如：对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

  4. insertBefore()

    例如：对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

删除

  1. remove():移除元素

    例如：对象.remove():将对象删除掉

  2. empty():清空元素的所有后代元素。

    例如：对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

克隆

  1. clone()：克隆匹配的DOM元素并且选中这些克隆的副本

    在案例：QQ表情中有演示

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <script type="text/javascript">
		 $(function () {
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>

			 $("#b1").click(function () {
				 //append
				 //$("#city").append($("#fk"));
				 //appendTo
                 $("#fk").appendTo($("#city"));
             });
             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () {
                 //prepend
                 //$("#city").prepend($("#fk"));
                 //prependTo
                 $("#fk").prependTo($("#city"));
             });
             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () {
                 //after
				 //$("#tj").after($("#fk"));
                 //insertAfter
                 $("#fk").insertAfter($("#tj"));

             });
             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () {
                 //before
                 //$("#tj").before($("#fk"));
                 //insertBefore
                 $("#fk").insertBefore($("#tj"));

             });
			 // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
			 $("#b5").click(function () {
				 $("#bj").remove();
			 });
			 // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
			 $("#b6").click(function () {
				 $("#city").empty();
			 });
         });	
	</script>
	</head>
	<body>
		<input type="button" value="将反恐放置到city的后面"  id="b1"/>
		<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
		<input type="button" value="将反恐插入到天津后面"  id="b3"/>
		<input type="button" value="将反恐插入到天津前面"  id="b4"/>
		<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b5"/>
		<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b6"/>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		<p class="hello">Hello</p> how are <p>you?</p>
		<div id="foo1">Hello1</div> 
       
	</body>   
</html>
LiuszZZ
关注
专栏目录
Jquery更换背景色
gengyudan的专栏
04-23 6773
阿里西西网页特效演示效果             body, p, ul         {             margin: 0;             padding: 0;         }         ul         {             float: right;             height: 40px;
jquery.reveal_使用jQuery Reveal插件构建弹出模态窗口
Web design 教程小屋
07-07 928
今天，我们将采用Orman的弹出模态窗口 ，并使用HTML和CSS重新创建它。 然后，我们将使用jQuery Reveal插件提供完整的功能。 我们甚至会更进一步，添加一些CSS3 Media Queries以使其适应移动使用。 让我们开始吧！ [这是一个简单的小模式窗口，非常适合预览中看到的小确认消息。 不，使用Comic Sans没有任何借口。 奥曼·克拉克（Orman Clark）...
jq动态改变背景颜色的background兼容问题
前端之路的博客
01-11 5692
改变某一个元素的背景颜色，在开发中应该是个比较常见的功能，但是就是这样一个简单功能，在谷歌 火狐和IE浏览器上也会出现兼容问题，具体问题如下： &lt;!--颜色和样式这里我就省略了--&gt; &lt;div class="item"&gt;立即咨询&lt;/div&gt; 如果想用jq获取这个div的样式用 console.log($(".item").css("background"))..
jQuery设置背景颜色
热门推荐
Java技术
07-16 2万+
<script type="text/javascript"> $(document.body).css("background","pink") </script>
JQuery获取元素对象大全
crazy code
01-21 8592
Query获取 Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项 时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
在jquery中常用获取元素对象的方法
yuzheh521的博客
05-07 439
1.$selector.eq(index) 函数–获取当前对象中指定索引所对应的的元素 <!DOCTYPE html> <html lang="zh-CN"> <head lang="en"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></sc...
vmguw28.zip_JavaScript/JQuery_Java_
08-09
标题“vmguw28.zip_JavaScript/JQuery_Java_”表明这是一个包含与JavaScript、jQuery和Java相关的项目的压缩文件。描述中提到“JAVA写的一个压缩文件的源码”，这暗示了压缩包内可能有一个或多个Java项目，可能是...
基于Jquery的淡入淡出的特效基础练习
12-02
今天练习了个Jquery淡入淡出的特性代码如下： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
jquery所有版本
06-04
自2006年首次发布以来，jQuery经历了多个版本的迭代，每个版本都在前一个基础上进行优化和新增功能，以适应不断变化的Web开发需求。 首先，jQuery的核心理念是“write less, do more”，它通过提供简洁易用的API，...
jQuery基础（对象获取、相关方法）
m0_59592734的博客
05-15 1734
jQuery 它对我们常见的js操作dom进行封装是我们开发更加方便 （新建.min.js文件，复制Download the compressed, production jQuery 3.6.0中的代码到里面，再在工程中引入就行了） // 2. 等着页面DOM加载完毕再去执行js 代码，入口函数 $(function() { $('div').hide(); }) $是jQuery的别称 +- jq对象和dom对象的...
Java前端_Jquery基础操作笔记
LongKai_G
11-05 1695
Jquery 一、JavaScript和Jquery区别 JavaScript：将所有的div标签内的元素内容设置为aaa //js获取全部名为div的html元素对象（div标签） var divs = document.getElementsByTagName("div"); //弹出对话框 divs内div对象的个数 alert(divs.length); //将所有的div（数组）内元素内容设置为aaa for (var i = 0; i <di
JQuery获取元素
weixin_58526727的博客
07-21 2854
jQuery jQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库 由John Resig 在 2006 年 1 月，jQuery 正式发布 query 本身是选择的意思，主要对 JavaScript 中的选择元素的方法进行了大量的优化。 版本发展 1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在
行级元素和块级元素-洋葱先生-杨少通
前端小白的逆袭
09-14 523
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。 常用的块状元素有： 、、…、、、、、、 、 常用的内联元素有： 、、、、、、、、、、 常用的内联块状元素有： 、 块级元素什么是块级元素？在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元
jQuery选择器小结
萌萌的It人 www.itmmd.com
07-30 1413
1.选择器 1.id选择器： //选择 id为 one 的元素       $('#one') 2.类选择器： //选择 class 为 mini 的所有元素 $('.mini') 3.标签选择器 //选择 元素名是 div 的所有元素 $('div') 4.选择所有元素 $('*') 5.多选择器 //选择 所有的span元素和id为two的div元素 $('span,#two') 2.层次选择
javaWeb-------Jquery（初级）
qq_40955824的博客
07-16 270
JQuery 基础： 1. 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的Ja...
JQuery 中this和$(this)获取对象、操作DOM对象的元素属性
逸尘的专栏
03-17 1万+
$("#row a img").each(function(index){ alert($(this)); alert(this); } //可以看出来$(this)是jquery对象，而this是DOM对象： alert($(this)); 弹出的结果是[object Object ] alert(this); 弹出来的是[objec
jquery获取元素四种方式。
0bug0warning的博客
10-09 1万+
jquery获取元素四种方式。 当你成功引入jquery插件之后，就可以用jquery的语法来获取html元素。 js获取只有document.getElementById或者通过名称来获取。 而jquery获取元素方式比较多。 通过id获取，jquery的语法更为简练$("#id").event; 通过class获取，$(.“css”).event() 通过属性html标签获取，$(“p”)....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值