jQuery基础总计

框架概述

框架(Framework)是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。框架是完成某种功能的半成品，框架是将我们日常的繁琐的代码进行抽取，并提供出更加简洁，功能更加强大的语法实现，我们可以对底层的API进行封装，对外提供更加简单的语法来实现最终的功能，从而提高开发效率。

jQuery框架概述

jQuery是一个优秀的JavaScript的轻量级框架之一，兼容css3,和各大浏览器，提供了dom，events，animate，ajax等简易的操作。并且jQuery的插件非常丰富，大多数功能都有相应的插件解决方案jQuery的宗旨是 “write less do more”即“少写多做”。

轻量级就说明框架很小，jQuery插件，就是利用jQuery技术实现的具有特定功能的效果。

jQuery的作用

jQuery最主要的作用是简化js的操作

jQuery下载位置

jQuery的官方下载地址：http://www.jquery.com

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插件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小

jQuery的引入

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

jQuery对象与js对象之间的转换

jquery本质上虽然也是 js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象的方式获得的dom，使用js方式获取的对象是js的dom对象，使用jQuery方式获取的对象是jQuery对象，两者的转换关系如下:

js 的DOM对象转成jQ对象，语法：$(js对象)

jq对象转换成js对象，语法：jq对象[索引]或jq对象.get(索引)

jQuery选择器

基本选择器

代码示例

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>基本选择器</title>
  5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 <script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
  7 <style type="text/css">
  8 div,span{
  9 width: 180px;
 10 height: 180px;
 11 margin: 20px;
 12 background: #9999CC;
 13 border: #000 1px solid;
 14 float:left;
 15 font-size: 17px;
 16 font-family:Roman;
 17          }
 18 
 19 div .mini{
 20 width: 50px;
 21 height: 50px;
 22 background: #CC66FF;
 23 border: #000 1px solid;
 24 font-size: 12px;
 25 font-family:Roman;
 26          }
 27 
 28 div .mini01{
 29 width: 50px;
 30 height: 50px;
 31 background: #CC66FF;
 32 border: #000 1px solid;
 33 font-size: 12px;
 34 font-family:Roman;
 35          }
 36 
 37 
 38 
 39 </style>
 40 
 41 </head>
 42 
 43 <body>
 44 
 45 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 46 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
 47 <input type="button" value=" 改变元素名为<div>的所有元素的背景色为 红色"  id="b2"/>
 48 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
 49 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
 50 
 51 
 52 <h1>有一种奇迹叫坚持</h1>
 53 <h2>自信源于努力</h2>
 54 
 55 <div id="one">
 56            id为one       
 57 </div>
 58 
 59 <div id="two" class="mini" >
 60              id为two   class是 mini 
 61 <div  class="mini" >class是 mini</div>
 62 </div>
 63 
 64 <div class="one" >
 65              class是 one 
 66 <div  class="mini" >class是 mini</div>
 67 <div  class="mini" >class是 mini</div>
 68 </div>
 69 <div class="one" >
 70            class是 one 
 71 <div  class="mini01" >class是 mini01</div>
 72 <div  class="mini" >class是 mini</div>
 73 </div>
 74 
 75 <div id="mover" >
 76            div  动画
 77 </div>
 78 
 79 <span class="spanone">class为spanone的span元素</span>
 80 <span class="mini">class为mini的span元素</span>
 81 
 82 
 83 <input type="text" value="zhang" id="username" name="username">
 84 
 85 </body>
 86 
 87 
 88 <script type="text/javascript">
 89 
 90 // <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
 91 //js动态注册事件方式：js对象.onclick = function(){};
 92 //jq动态注册事件方式：jq对象.click(function(){});
 93 $("#b1").click(function () {
 94 //改变元素的背景色为 红色
 95 // js方式1：js对象.style.backgroundColor="red";
 96    // js方式2：js对象.style="background-color:red";
 97    //  jq方式1：jq对象.css("backgroundColor","red");
 98    //  jq方式2：jq对象.css("background-color","red");
 99 $("#one").css("background-color","red");//idea擅长web后端，写前端不是很完美，前端完美的开发工具是HBuilder
100 });
101 //     <input type="button" value=" 改变元素名为<div>的所有元素的背景色为 红色"  id="b2"/>
102 $("#b2").click(function () {
103 $("div").css("background-color","red");
104 });
105 //     <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
106 $("#b3").click(function () {
107 $(".mini").css("background-color","red");
108 });
109 //     <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
110 $("#b4").click(function () {
111 $("span,#two").css("background-color","red");
112 });
113 </script>
114 
115 </html>

层级选择器

代码示例

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>层次选择器</title>
  5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 <script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
  7 <style type="text/css">
  8 div,span{
  9 width: 180px;
 10 height: 180px;
 11 margin: 20px;
 12 background: #9999CC;
 13 border: #000 1px solid;
 14 float:left;
 15 font-size: 17px;
 16 font-family:Roman;
 17          }
 18 
 19 div .mini{
 20 width: 50px;
 21 height: 50px;
 22 background: #CC66FF;
 23 border: #000 1px solid;
 24 font-size: 12px;
 25 font-family:Roman;
 26          }
 27 
 28 div .mini01{
 29 width: 50px;
 30 height: 50px;
 31 background: #CC66FF;
 32 border: #000 1px solid;
 33 font-size: 12px;
 34 font-family:Roman;
 35          }
 36 
 37 </style>
 38 
 39 </head>
 40 
 41 <body>
 42 
 43 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 44 <input type="button" value=" 改变<body>内所有<div>的背景色为红色"  id="b1"/>
 45 <input type="button" value=" 改变<body>内子<div>的背景色为 红色"  id="b2"/>
 46 <input type="button" value=" 改变 id 为 one 的下一个<div>的背景色为 红色"  id="b3"/>
 47 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
 48 <input type="button" value=" 改变 id 为 two 的元素所有<div>兄弟元素的背景色为红色"  id="b5"/>
 49 
 50 
 51 <h1>有一种奇迹叫坚持</h1>
 52 <h2>自信源于努力</h2>
 53 
 54 <div id="one">
 55            id为one  
 56 
 57 </div>
 58 
 59 <div id="two" class="mini" >
 60              id为two   class是 mini 
 61 <div  class="mini" >class是 mini</div>
 62 </div>
 63 
 64 <div class="one" >
 65              class是 one 
 66 <div  class="mini" >class是 mini</div>
 67 <div  class="mini" >class是 mini</div>
 68 </div>
 69 <div class="one">
 70            class是 one 
 71 <div  class="mini01" >class是 mini01</div>
 72 <div  class="mini" >class是 mini</div>
 73 </div>
 74 
 75 <div id="mover" >
 76 动画
 77 </div>
 78 
 79 <span class="spanone">    span
 80 </span>
 81 
 82 </body>
 83 
 84 <script type="text/javascript">
 85 
 86 // <input type="button" value=" 改变<body>内所有<div>的背景色为红色"  id="b1"/>
 87 $("#b1").click(function () {
 88 $("body div").css("background-color","red");
 89 });
 90 //     <input type="button" value=" 改变<body>内子<div>的背景色为 红色"  id="b2"/>
 91 $("#b2").click(function () {
 92 $("body>div").css("background-color","red");
 93 });
 94 //     <input type="button" value=" 改变 id 为 one 的下一个<div>的背景色为 红色"  id="b3"/>
 95 $("#b3").click(function () {
 96 $("#one + div").css("background-color","red");
 97 });
 98 //     <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
 99 $("#b4").click(function () {
100 $("#two ~ div").css("background-color","red");
101 });
102 //     <input type="button" value=" 改变 id 为 two 的元素所有<div>兄弟元素的背景色为红色"  id="b5"/>
103 $("#b5").click(function () {
104 //$("#two").siblings("div")获取所有兄弟元素过滤出div的
105 $("#two").siblings("div").css("background-color","red");
106 });
107 </script>
108 
109 </html>

属性选择器

代码示例

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>属性过滤选择器</title>
  5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 <script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
  7 <style type="text/css">
  8 div,span{
  9 width: 180px;
 10 height: 180px;
 11 margin: 20px;
 12 background: #9999CC;
 13 border: #000 1px solid;
 14 float:left;
 15 font-size: 17px;
 16 font-family:Roman;
 17          }
 18 
 19 div .mini{
 20 width: 50px;
 21 height: 50px;
 22 background: #CC66FF;
 23 border: #000 1px solid;
 24 font-size: 12px;
 25 font-family:Roman;
 26          }
 27 
 28 div .mini01{
 29 width: 50px;
 30 height: 50px;
 31 background: #CC66FF;
 32 border: #000 1px solid;
 33 font-size: 12px;
 34 font-family:Roman;
 35          }
 36 
 37 
 38 div.visible{
 39 display:none;
 40          }
 41 </style>
 42 </head>
 43 
 44 <body>
 45 
 46 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 47 <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
 48 <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
 49 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
 50 <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
 51 <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
 52 <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
 53 <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
 54 
 55 
 56 <div id="one">
 57            id为one   div  
 58 </div>
 59 
 60 <div id="two" class="mini"  title="test">
 61              id为two   class是 mini  div  title="test"
 62 <div  class="mini" >class是 mini</div>
 63 </div>
 64 
 65 <div class="visible" >
 66              class是 one 
 67 <div  class="mini" >class是 mini</div>
 68 <div  class="mini" >class是 mini</div>
 69 </div>
 70 <div class="one" title="test02">
 71            class是 one    title="test02"
 72 <div  class="mini01" >class是 mini01</div>
 73 <div  class="mini" style="margin-top:0px;">class是 mini</div>
 74 </div>
 75 
 76 
 77 <div class="visible" >
 78 这是隐藏的
 79 </div>
 80 
 81 <div class="one">
 82 
 83 </div>
 84 
 85 <div id="mover" >
 86 动画
 87 </div>
 88 
 89 <input type="text" value="zhang" id="username" name="username">
 90 </body>
 91 
 92 <script type="text/javascript">
 93 
 94 // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
 95 $("#b1").click(function () {
 96 $("div[title]").css("background-color","red");
 97 });
 98 //     <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
 99 $("#b2").click(function () {
100 $("div[title='test']").css("background-color","red");
101 });
102 //     <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
103 $("#b3").click(function () {
104 $("div[title!='test']").css("background-color","red");
105 });
106 //     <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
107 $("#b4").click(function () {
108 $("div[title^='te']").css("background-color","red");
109 });
110 //     <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
111 $("#b5").click(function () {
112 $("div[title$='est']").css("background-color","red");
113 });
114 //     <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
115 $("#b6").click(function () {
116 $("div[title*='es']").css("background-color","red");
117 });
118 //     <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
119 $("#b7").click(function () {
120 $("div[id][title*='es']").css("background-color","red");
121 });
122 
123 </script>
124 
125 </html>

基本过滤选择器

代码示例

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>基本过滤选择器</title>
  5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 <script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
  7 <style type="text/css">
  8 div,span{
  9 width: 180px;
 10 height: 180px;
 11 margin: 20px;
 12 background: #9999CC;
 13 border: #000 1px solid;
 14 float:left;
 15 font-size: 17px;
 16 font-family:Roman;
 17          }
 18 
 19 div .mini{
 20 width: 50px;
 21 height: 50px;
 22 background: #CC66FF;
 23 border: #000 1px solid;
 24 font-size: 12px;
 25 font-family:Roman;
 26          }
 27 
 28 div .mini01{
 29 width: 50px;
 30 height: 50px;
 31 background: #CC66FF;
 32 border: #000 1px solid;
 33 font-size: 12px;
 34 font-family:Roman;
 35          }
 36 </style>
 37 
 38 </head>
 39 
 40 <body>
 41 
 42 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 43 <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
 44 <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
 45 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
 46 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
 47 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
 48 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
 49 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
 50 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
 51 <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
 52 <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色"  id="b10"/>
 53 
 54 <h1>有一种奇迹叫坚持</h1>
 55 <h2>自信源于努力</h2>
 56 
 57 <div id="one">
 58            id为one  
 59 
 60 </div>
 61 
 62 <div id="two" class="mini" >
 63              id为two   class是 mini 
 64 <div  class="mini" >class是 mini</div>
 65 </div>
 66 
 67 <div class="one" >
 68              class是 one 
 69 <div  class="mini" >class是 mini</div>
 70 <div  class="mini" >class是 mini</div>
 71 </div>
 72 <div class="one" >
 73            class是 one 
 74 <div  class="mini01" >class是 mini01</div>
 75 <div  class="mini" >class是 mini</div>
 76 </div>
 77 
 78 <div id="mover" >
 79 动画
 80 </div>
 81 
 82 
 83 
 84 </body>
 85 
 86 <script type="text/javascript">
 87 // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
 88 $("#b1").click(function () {
 89 $("div:first").css("background-color","red");
 90 });
 91 //     <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
 92 $("#b2").click(function () {
 93 $("div:last").css("background-color","red");
 94 });
 95 //     <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
 96 $("#b3").click(function () {
 97 $("div:not(.one)").css("background-color","red");
 98 });
 99 //     <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
100 $("#b4").click(function () {
101 $("div:even").css("background-color","red");
102 });
103 //     <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
104 $("#b5").click(function () {
105 $("div:odd").css("background-color","red");
106 });
107 //     <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
108 $("#b6").click(function () {
109 $("div:gt(3)").css("background-color","red");
110 });
111 //     <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
112 $("#b7").click(function () {
113 $("div:eq(3)").css("background-color","red");
114 });
115 //     <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
116 $("#b8").click(function () {
117 $("div:lt(3)").css("background-color","red");
118 });
119 //     <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
120 $("#b9").click(function () {
121 $(":header").css("background-color","red");
122 });
123 //     <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色"  id="b10"/>
124 $("#b10").click(function () {
125 //单词方式
126 //十六进制，#b10=#bb1100
127    //rgb方式
128 //$(":animated")匹配正在执行动画的元素
129 $(":animated").css("background-color","red");
130 });
131 
132 
133 /*
134 * jquery的动画
135 *    jq对象.slideUp([speed][,fn]});设置元素向上滑动收起隐藏
136 *      参数1，speed，动画执行的速度
137 *         写法1：单词字符串方式，"slow/normal/fast"
138 *         写法2：以毫秒数的写法，3000，动画执行3秒
139 *      参数2：fn=function(){}，回调函数。就是动画直接完毕后触发的函数
140 *    jq对象.slideDown([speed][,fn]);设置元素向下展开显示
141 *
142 * */
143       //让动画向上收起隐藏
144 /*$("#mover").slideUp("slow",function () {
145          //让动画向下展开显示
146          $("#mover").slideDown(3000,function () {
147             alert("动画执行完毕");
148             })
149         });*/
150 
151 
152       //让动画不停的向上收起和向下展开
153 function showAndHide() {
154 $("#mover").slideUp(3000,function () {
155 //让动画向下展开显示
156 $("#mover").slideDown(3000);
157             });
158         }
159 showAndHide();
160 setInterval("showAndHide()",6000);//定时器调用js代码方式一
161 //定时器调用js代码方式二：setInterval(showAndHide,6000);
162       //定时器调用js代码方式三：setInterval(function(){showAndHide();},6000);(推荐，因为可以给调用函数传递参数)
163 
164 </script>
165 
166 </html>

表单属性过滤选择器

代码示例

<!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 language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
         }

div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
         }

div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
         }
#job{
margin: 20px;
         }
#edu{
margin-top:-70px;
         }

</style>

</head>

<body>

<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用<input>元素的值"  id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用<input>元素的值"  id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>

<br><br>

<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >

<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理

<br><br>

<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女

<br><br>

<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>

<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>


<br/>

<div id="two" class="mini" >
             id为two   class是 mini  div
<div  class="mini" >class是 mini</div>
</div>

<div class="one" >
             class是 one 
<div  class="mini" >class是 mini</div>
<div  class="mini" >class是 mini</div>
</div>
<div class="one" >
           class是 one 
<div  class="mini01" >class是 mini01</div>
<div  class="mini" >class是 mini</div>
</div>

</body>

<script type="text/javascript">

// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用<input>元素的值"  id="b1"/>
$("#b1").click(function () {
//jq对象.val(值)，获取/设置表单元素value属性的
$("input[type='text']:enabled").val("aaaa");
});
//     <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用<input>元素的值"  id="b2"/>
$("#b2").click(function () {
//jq对象.val(值)，获取/设置表单元素value属性的
$("input[type='text']:disabled").val("aaaa");

//扩展
//$(":text:disabled").val("aaaa");
});
//     <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
$("#b3").click(function () {
//jq对象.length,获取匹配元素的个数
alert($(":checkbox:checked").length);
//普通写法：alert($("input[type='checkbox']:checked").length);
});
//     <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
$("#b4").click(function () {
//jq对象.text(值)，获取/设置标签体文本内容，相当于js对象.innerText
alert($("select option:selected").text());
});

</script>

</html>

jQuery的DOM操作

<!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 language=“JavaScript” src=“../js/jquery-3.3.1.min.js”></script>
<style type=“text/css”>
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}

div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>

</head>

<body>

<input type=“button” value=“保存“ class=“mini” name=“ok” class=“mini” />
<input type=“button” value=” 改变第一个 div 元素的背景色为红色“ id=“b1”/>
<input type=“button” value=” 改变最后一个 div 元素的背景色为红色“ id=“b2”/>
<input type=“button” value=” 改变class不为 one 的所有 div 元素的背景色为红色“ id=“b3”/>
<input type=“button” value=” 改变索引值为偶数的 div 元素的背景色为红色“ id=“b4”/>
<input type=“button” value=” 改变索引值为奇数的 div 元素的背景色为红色“ id=“b5”/>
<input type=“button” value=” 改变索引值为大于 3 的 div 元素的背景色为红色“ id=“b6”/>
<input type=“button” value=” 改变索引值为等于 3 的 div 元素的背景色为红色“ id=“b7”/>
<input type=“button” value=” 改变索引值为小于 3 的 div 元素的背景色为红色“ id=“b8”/>
<input type=“button” value=” 改变所有的标题元素的背景色为红色“ id=“b9”/>
<input type=“button” value=” 改变当前正在执行动画的所有元素的背景色为红色“ id=“b10”/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id=“one”>
id为one

</div>

<div id=“two” class=“mini” >
id为two class是 mini
<div class=“mini” >class是 mini</div>
</div>

<div class=“one” >
class是 one
<div class=“mini” >class是 mini</div>
<div class=“mini” >class是 mini</div>
</div>
<div class=“one” >
class是 one
<div class=“mini01” >class是 mini01</div>
<div class=“mini” >class是 mini</div>
</div>

<div id=“mover” >
动画
</div>

</body>

<script type=“text/javascript”>
// <input
type=”button” value=” 改变第一个 div 元素的背景色为红色“
id=”b1″/>
$(“#b1”).click(function () {
$(“div:first”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变最后一个 div 元素的背景色为红色“ id=”b2″/>
$(“#b2”).click(function () {
$(“div:last”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变class不为 one 的所有 div 元素的背景色为红色“
id=”b3″/>
$(“#b3”).click(function () {
$(“div:not(.one)”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变索引值为偶数的 div 元素的背景色为红色“ id=”b4″/>
$(“#b4”).click(function () {
$(“div:even”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变索引值为奇数的 div 元素的背景色为红色“ id=”b5″/>
$(“#b5”).click(function () {
$(“div:odd”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变索引值为大于 3 的 div 元素的背景色为红色“
id=”b6″/>
$(“#b6”).click(function () {
$(“div:gt(3)”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变索引值为等于 3 的 div 元素的背景色为红色“
id=”b7″/>
$(“#b7”).click(function () {
$(“div:eq(3)”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变索引值为小于 3 的 div 元素的背景色为红色“
id=”b8″/>
$(“#b8”).click(function () {
$(“div:lt(3)”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变所有的标题元素的背景色为红色“
id=”b9″/>
$(“#b9”).click(function () {
$(“:header”).css(“background-color”,“red”);
});
//     <input type=”button”
value=” 改变当前正在执行动画的所有元素的背景色为红色“
id=”b10″/>
$(“#b10”).click(function () {
//单词方式
//十六进制，#b10=#bb1100
   //rgb方式
//$(“:animated”)匹配正在执行动画的元素
$(“:animated”).css(“background-color”,“red”);
});

/*
* jquery的动画
*    jq对象.slideUp([speed][,fn]});设置元素向上滑动收起隐藏
*      参数1，speed，动画执行的速度
*         写法1：单词字符串方式，“slow/normal/fast”
*         写法2：以毫秒数的写法，3000，动画执行3秒
*      参数2：fn=function(){}，回调函数。就是动画直接完毕后触发的函数
*    jq对象.slideDown([speed][,fn]);设置元素向下展开显示
*
* */
      //让动画向上收起隐藏
/*$(“#mover”).slideUp(“slow”,function
() {
         //让动画向下展开显示

$(“#mover”).slideDown(3000,function () {
            alert(“动画执行完毕“);
            })
        });*/

      //让动画不停的向上收起和向下展开
function showAndHide() {
$(“#mover”).slideUp(3000,function () {
//让动画向下展开显示
$(“#mover”).slideDown(3000);
            });
        }
showAndHide();
setInterval(“showAndHide()”,6000);//定时器调用js代码方式一
//定时器调用js代码方式二：setInterval(showAndHide,6000);
      //定时器调用js代码方式三：setInterval(function(){showAndHide();},6000);(推荐，因为可以给调用函数传递参数)

</script>

</html>

jQuery的DOM操作

jQuery对DOM树中的文本和值进行操作

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
 7 <script type="text/javascript">
 8 /*
 9          *  val([value])   获得/设置元素value属性相应的值
10             text([value])  获得/设置元素的文本内容
11             html([value])  获得/设置元素的标签体所有内容
12          * */
13 
14 $(function () {
15 //获取mydiv标签体所有内容
16 //alert($("#mydiv").html());
17 
18             //获取mydiv标签体文本内容
19 //alert($("#mydiv").text());
20 
21             //设置myinput表单元素的值为javaee87
22 $("#myinput").val("javaee87");
23             });
24 
25 </script>
26 </head>
27 <body>
28 <input id="myinput" type="text" name="username" value="张三" /><br />
29 <div id="mydiv"><p><a href="#">标题标签</a></p></div>
30 </body>
31 </html>

jQuery对DOM树中的属性进行操作

代码示例

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4 <title>获取属性</title>
 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
 7 <style type="text/css">
 8 div,span{
 9 width: 140px;
10 height: 140px;
11 margin: 20px;
12 background: #9999CC;
13 border: #000 1px solid;
14 float:left;
15 font-size: 17px;
16 font-family:Roman;
17          }
18 
19 div.mini{
20 width: 30px;
21 height: 30px;
22 background: #CC66FF;
23 border: #000 1px solid;
24 font-size: 12px;
25 font-family:Roman;
26          }
27 
28 div.visible{
29 display:none;
30          }
31 </style>
32 
33 </head>
34 
35 <body>
36 
37 <ul>
38 <li id="bj" name="beijing" xxx="yyy">北京</li>
39 <li id="tj" name="tianjin">天津</li>
40 </ul>
41 <input type="checkbox" id="hobby"/>
42 
43 
44 </body>
45 
46 <script type="text/javascript">
47 
48 /*
49       * jq操作标签属性语法
50       *  attr(name[,value]) 获得/设置属性的值
51       *   removeAttr(name)    删除指定的属性
52          prop(name[,value]) 获得/设置属性的值(checked，selected)，这个是操作属性值为boolean类型的
53 
54          注意：
55              一般获取或设置属性都是用attr，但是如果想获取boolean类型的属性值使用prop，prop主要负责操作selected或checked属性。
56       * */
57 
58       //获取北京节点的name属性值
59 //alert($("#bj").attr("name"));
60       //设置北京节点的name属性的值为dabeijing
61         //$("#bj").attr("name","dabeijing");
62       //新增北京节点的description属性 属性值是didu
63         //$("#bj").attr("description","didu");
64       //删除北京节点的name属性并检验name属性是否存在
65 //$("#bj").removeAttr("name");
66       //获得hobby的的选中状态
67 //alert($("#hobby").attr("checked"));//弹出的结果是undefined
68       //想获取多选框选中状态为boolean值，true代表选中，false代表没选中，此时使用prop获取boolean类型值
69 //alert($("#hobby").prop("checked"));
70       //通过prop设置复选框选中
71 $("#hobby").prop("checked",true);
72 
73 
74 
75 </script>
76 
77 </html>

attr与prop的注意问题

attr与prop是以1.6为界限，prop属性操作1.6版本才有
checked 和 selected 使用prop获取
其他使用attr获取获取不到换成prop

jQuery对class进行操作

代码示例

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>样式操作</title>
  5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  7 <style type="text/css">
  8          .one{
  9 width: 200px;
 10 height: 140px;
 11 margin: 20px;
 12 background: red;
 13 border: #000 1px solid;
 14 float:left;
 15 font-size: 17px;
 16 font-family:Roman;
 17          }
 18 
 19 div,span{
 20 width: 140px;
 21 height: 140px;
 22 margin: 20px;
 23 background: #9999CC;
 24 border: #000 1px solid;
 25 float:left;
 26 font-size: 17px;
 27 font-family:Roman;
 28          }
 29 
 30 div .mini{
 31 width: 40px;
 32 height: 40px;
 33 background: #CC66FF;
 34 border: #000 1px solid;
 35 font-size: 12px;
 36 font-family:Roman;
 37          }
 38 div .mini01{
 39 width: 40px;
 40 height: 40px;
 41 background: #CC66FF;
 42 border: #000 1px solid;
 43 font-size: 12px;
 44 font-family:Roman;
 45          }
 46 
 47 /*待用的样式*/
 48 .second{
 49 width: 300px;
 50 height: 340px;
 51 margin: 20px;
 52 background: yellow;
 53 border: pink 3px dotted;
 54 float:left;
 55 font-size: 22px;
 56 font-family:Roman;
 57          }
 58 
 59 
 60 </style>
 61 
 62 </head>
 63 
 64 <body>
 65 
 66 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 67 <input type="button" value="给id为one设置属性class的值为second"  id="b1"/>
 68 <input type="button" value=" addClass"  id="b2"/>
 69 <input type="button" value="removeClass"  id="b3"/>
 70 <input type="button" value=" 切换样式"  id="b4"/>
 71 <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
 72 <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
 73 
 74 <h1>有一种奇迹叫坚持</h1>
 75 <h2>自信源于努力</h2>
 76 
 77 <div id="one">
 78            id为one 
 79 </div>
 80 
 81 <div id="two" class="mini" >
 82              id为two   class是 mini 
 83 <div  class="mini" >class是 mini</div>
 84 </div>
 85 
 86 <div class="one" >
 87              class是 one 
 88 <div  class="mini" >class是 mini</div>
 89 <div  class="mini" >class是 mini</div>
 90 </div>
 91 
 92 <div class="one" >
 93            class是 one 
 94 <div  class="mini01" >class是 mini01</div>
 95 <div  class="mini" >class是 mini</div>
 96 </div>
 97 
 98 <div id="mover" >
 99 动画
100 </div>
101 
102 <span class="spanone">    span
103 </span>
104 
105 </body>
106 
107 <script type="text/javascript">
108 
109 /*
110       * 操作样式
111       *  css(name[,value])  获取/设置指定的CSS样式
112          addClass(value)    addClass(类样式名) 给指定的对象添加新的类样式，指定类样式名字即可
113          removeClass(value) removeClass(类样式名) 删除指定的类样式
114          toggleClass(value) toggleClass(类样式名) 切换样式，如果没有类样式，则添加，如果有类样式，则删除
115 
116       * */
117 
118 // <input type="button" value="给id为one设置属性class的值为second"  id="b1"/>
119 $("#b1").click(function () {
120 $("#one").attr("class","second");//通过属性设置样式
121 });
122 // <input type="button" value=" addClass"  id="b2"/>
123 $("#b2").click(function () {
124 $("#one").addClass("second");
125         });
126 // <input type="button" value="removeClass"  id="b3"/>
127 $("#b3").click(function () {
128 $("#one").removeClass("second");
129         });
130 // <input type="button" value=" 切换样式"  id="b4"/>
131 $("#b4").click(function () {
132 $("#one").toggleClass("second");
133         });
134 // <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
135 $("#b5").click(function () {
136 alert($("#one").css("background-color"));
137         });
138 // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
139 $("#b6").click(function () {
140 $("#one").css("background-color","green");//css方法实质上是在元素里面操作style属性样式
141 });
142 
143 
144 
145 
146 </script>
147 
148 </html>

jQuery创建插入对象

代码示例

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4 <title>内部插入脚本</title>
 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 <script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
 7 <style type="text/css">
 8 div,span{
 9 width: 140px;
10 height: 140px;
11 margin: 20px;
12 background: #9999CC;
13 border: #000 1px solid;
14 float:left;
15 font-size: 17px;
16 font-family:Roman;
17          }
18 
19 div .mini{
20 width: 30px;
21 height: 30px;
22 background: #CC66FF;
23 border: #000 1px solid;
24 font-size: 12px;
25 font-family:Roman;
26          }
27 
28 div.visible{
29 display:none;
30          }
31 </style>
32 </head>
33 
34 <body>
35 <ul id="city">
36 <li id="bj" name="beijing">北京</li>
37 <li id="tj" name="tianjin">天津</li>
38 <li id="cq" name="chongqing">重庆</li>
39 </ul>
40 
41 
42 <ul id="love">
43 <li id="fk" name="fankong">反恐</li>
44 <li id="xj" name="xingji">星际</li>
45 </ul>
46 
47 <div id="foo1">Hello1</div>
48 
49 </body>
50 
51 <script type="text/javascript">
52 
53 /*
54       * jq对象操作标签元素增、改api
55       *  $("<A></A>")   创建A元素对象
56          父节点.append(子节点)    添加成最后一个子元素，两者之间是父子关系
57          父节点.prepend(子节点)   添加成第一个子元素，两者之间是父子关系
58          节点.before(上一个兄弟节点) 添加到当前元素的前面，两者之间是兄弟关系
59          节点.after(下一个兄弟节点)  添加到当前元素的后面，两者之间是兄弟关系
60       *
61       * */
62 
63       /**将反恐放置到city的后面*/
64       //$("#city").append($("#fk"));
65 
66       /**将反恐放置到city的最前面*/
67         //$("#city").prepend($("#fk"));
68 
69       /**将反恐放置到天津的前面*/
70       //$("#tj").before($("#fk"))
71 
72       /**将反恐放置到天津的后面*/
73         //$("#tj").after($("#fk"))
74 
75       /**创建上海放置到city的后面*/
76 $("#city").append($("<li id='sh' name=\"shanghai\">上海</li>"));
77 
78 
79 </script>
80 
81 </html>

jQuery删除对象

代码示例

<!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 type="text/javascript" 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>

</head>

<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>

<script type="text/javascript">
/*      jq对象.remove()  删除当前自己，自杀式
        jq对象.empty()   清空指当前元素的所有子元素*/


        //删除<li id="bj" name="beijing">北京</li>
      //$("#bj").remove();

      //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
$("#city").empty();
//测试(id='city')并没有被删除



</script>

</html>

本文链接：https://www.cnblogs.com/Jeremy95-Sze/p/12976702.html

jQuery基础总计

框架概述

jQuery框架概述

jQuery的作用

jQuery下载位置

jQuery的版本

jQuery的引入

jQuery对象与js对象之间的转换

jQuery选择器

基本选择器

代码示例

层级选择器

代码示例

属性选择器

代码示例

基本过滤选择器

代码示例

表单属性过滤选择器

代码示例

jQuery的DOM操作

jQuery对DOM树中的文本和值进行操作

代码示例

jQuery对DOM树中的属性进行操作

代码示例

attr与prop的注意问题

jQuery对class进行操作

代码示例

jQuery创建插入对象

代码示例

jQuery删除对象

代码示例

jQuery基础总计的更多相关文章

随机推荐

热门专题

目录导航