jQuery入门基础-附案例

最新推荐文章于 2022-08-04 09:55:06 发布
最新推荐文章于 2022-08-04 09:55:06 发布
阅读量1.2k 收藏 15
点赞数 4
分类专栏： 前端开发基础 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43293778/article/details/106497399
版权
本文详细介绍了jQuery的基础知识，包括jQuery的概念、优点、使用方法和常见动画效果。通过案例分析，如开关灯、下拉菜单、手风琴效果等，深入浅出地展示了jQuery在DOM操作、事件处理和动画设计上的便利性。此外，文章还讨论了jQuery的入口函数、DOM对象与jQuery对象的转换以及jQuery选择器的运用。最后，探讨了jQuery的插件机制，展示了如何利用jQuery UI制作手风琴菜单，旨在帮助读者快速掌握jQuery并提升开发效率。
摘要由CSDN通过智能技术生成

文章目录

预备知识与后续知识及项目案例

HTML入门与进阶以及HTML5
CSS基础知识以及CSS3
JavaScript基础语法
jQuery入门基础
Node.js + Gulp 知识点汇总
MongoDB + Express 入门及案例代码
Vue全面知识点速查

为什么要学jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        div {
   
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="设置边框" id="btnOne"/>
    <input type="button" value="设置文本" id="btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
<!-- 需求：点击按钮给三个div设置边框和文本 -->

使用javascript开发过程中，有许多的缺点：

  1. 查找元素的方法单一，麻烦。
  2. 遍历数组很麻烦，通常要嵌套一大堆的for循环。
  3. 有兼容性问题。
  4. 想要实现简单的动画效果，也很麻烦
  5. 代码冗余。
	<script>
    //入门函数
    window.onload = function(){
   
        //1.先要获取对应的元素
        var btnOne=document.getElementById("btnOne");
        var btnTwo=document.getElementById("btnTwo");
        var divs=document.getElementsByTagName("div");
        //2.给btnOne按钮设置点击事件
        btnOne.onclick=function(){
   
            for(var i=0;i<divs.length;i++){
   
                divs[i].style.border='1px solid red';
            }
        }
         //3.给btnTwo按钮设置点击事件
         btnTwo.onclick=function(){
   
            for(var i=0;i<divs.length;i++){
   
                divs[i].textContent="我是设置的文本";
            }
        }
    }

    //再来一个入门函数
    // window.οnlοad=function(){
   
    //     console.log("我又是一个入口函数");
    // }

</script>

	//1.不能添加多个入口函数（window.onload),如果添加了多个，后面的会把前面的给覆盖
    //2.原生js的api名字都太长太难记
    //3.原生js有的时候代码冗余
    //4.原生js中有些属性或者方法，有浏览器兼容问题。
    //5.原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

jQuery介绍

JavaScript 库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

jQuery的概念

​ jQuery总体概况如下 :

  • jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

  • j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

  • jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

  • 学习jQuery本质： 就是学习调用这些函数（方法）。

  • jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

  1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
  2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
  3. 链式编程、隐式迭代。
  4. 对事件、样式、动画支持，大大简化了DOM操作。
  5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
  6. 免费、开源。

体验jquery的使用

/*
 * 1. 查找元素的方法多种多样，非常灵活
 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。
 * 3. 完全没有兼容性问题。
 * 4. 实现动画非常简单，而且功能更加的强大。
 * 5. 代码简单、粗暴。
 * */
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    //入口函数
    $(document).ready(function(){
   
        //设置边框
        $('#btnOne').click(function(){
   
            $('div').css('border','1px solid red');
        });

        //设置文本
        $('#btnTwo').click(function(){
   
            $('div').text('我是设置的文本');
        });
    })

    //新的入口函数
    $(document).ready(function(){
   
        consoloe.log("我又是一个入口函数");
    })

    //jquert的优点：
    //1.是可以写多个入口函数的
    //2.jQuery的api名字都容易记忆
    //3.jQuery代码简洁（隐式迭代）
    //4.jQuery帮我们解决了浏览器兼容问题
    //5.容错率较高，前面的代码出现了问题，后面的代码不受影响
</script>

  • jQuery设计的宗旨是’Write Less，Do More’，即倡导写更少的代码，做更多的事情。

  • 它封装的方法优化了HTML文档操作、事件处理、动画设计和Ajax交互 ，极大地简化了JavaScript 编程

  • jQuery的核心特性可以总结为:

    • 具有独特的链式语法和短小清晰的多功能接口;
    • 具有高效灵活的css选择器,并且可对CSS选择器进行扩展;
    • 拥有便捷的插件扩展机制和丰富的插件。
    • jQuery兼容各种主流浏览器

jquery到底是什么

jQuery的官网 http://jquery.com/

各个版本的下载：https://code.jquery.com/

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

What is jQuery?

   jQuery is a fast, small, and feature-rich JavaScript library. 
   It makes things like HTML document traversal and manipulation, 
   event handling, animation, and Ajax 
   much simpler with an easy-to-use API that works across a multitude of browsers. 
   With a combination of versatility and extensibility, 
   jQuery has changed the way that millions of people write JavaScript.

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。
（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

jquery的版本问题

官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

大版本分类：

  • 1.x版本：能够兼容IE678浏览器
  • 2.x版本：不能兼容IE678浏览器
  • 3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版compressed和未压缩版uncompressed：

  • jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
  • jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jquery的入口函数

使用jQuery的三个步骤：

  1. 引入jQuery文件
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  1. 入口函数
$(document).ready(function(){
   

});
  1. 功能实现
    即找到你要操作的元素（jQuery选择器），去操作他（给他添加属性，样式，文本…）
$(document).ready(function(){
   
	$('div').width(100).height(100).css('backgroundColor','red').text('哈哈');   //链式编程
});

关于jQuery的入口函数：

	//第一种写法：繁琐，但是也可以实现
	$(document).ready(function() {
   
		 ...  //  此处是页面DOM加载完成的入口
	});
	//第二种写法：简单易用
	$(function() {
   
		 ...  // 此处是页面 DOM 加载完成的入口
	});

总结：

  1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
  2. 相当于原生 js 中的 DOMContentLoaded。
  3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
  4. 更推荐使用第二种方式。

jQuery入口函数与js（window.onload）入口函数的对比：

  • 执行时机不同：jQuery入口函数要快于window.onload

    • JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
    • jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

  • window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个的

$(function(){
   
	alert("我是jQuery入口函数");
});

window.onload = function(){
   
	alert("我是window.onload");
});

jQuery中的顶级对象

1、 $ 是什么？
如果报错：$ is not defined,就说明没有引入jQuery文件

$(function(){
   

});

2、jQuery文件结构
其实是一个自执行函数

(function(){
   
	window.jQuery = window.$ = jQuery;
}());

3、
a.引入一个js文件,是会执行这js文件中的代码的.

console.log(num);//10

b.jQuery文件是一个自执行函数,执行这个jQUERY文件中的代码,其实就是执行这个自执行函数.

c.这个自执行文件就是给window对象添加一个jQuery属性和$属性.

console.log(window);

d.$其实和jQuery是等价的,是一个函数.

console.log(window.jQuery === window.$);//true
console.log(Object.prototype.toString.call($));//'[object Function]'

4.$是一个函数

参数传递不同,效果也不一样.

4.1 如果参数传递的是一个匿名函数-入口函数

$(function(){
   
});

4.2 如果参数传递的是一个字符串-选择器/创建一个标签

$('#one');
$('<div>啦啦,我是一个div</div>');

4.3 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象.

$(dom对象);

总结：

  1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
  2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jq对象和dom对象(重要)

在这里插入图片描述

  1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。（原生js选择器获取到的对象）
    特点：只能调用dom方法或者属性，不能调用jQuery的属性或方法。
var div1 = document.getElementsById("one");
div1.style.backgroundColor = 'red'; //dom对象是可以调用dom的属性或方法
div1.css('backgroundColor','green');
//报错了 div1.css is not a function，因为dom对象不能抵用jQuery属性或方法
  1. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。（利用jQuery选择器获取到的对象）
    特点：只能调用jQuery的属性或者方法，不能调用原生Jsdom对象的属性或者方法。
var $div1 = $('#one');
$div1.css('backgroundColor','green');//jQuery对象是可以调用jQuery的方法
$div1.style.backgroundColor = 'red';//报错 Cannot set property 'backgroundColor' of undefined
  1. jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
var div1 = document.getElementsById("one");
console.log(div1);//<div id="one"></div>

var $div1 = $('#one');
console.log($div1);//jQuery.fn.init[div#one,context:document,selector:"#one"]
console.log($div1.__proto__===Array.prototype);//false,jQuery是一个伪数组
  1. DOM对象与jQuery对象的方法不能混用。

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

	// 1.DOM对象转换成jQuery对象，方法只有一种
	var box = document.getElementById('box');  // 获取DOM对象
	var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象
	console.log(jQueryObject);

jQuery对象转换成DOM对象：

	//2.jQuery 对象转换为 DOM 对象有两种方法：
	var $li = $("li");
	//第一种方法（推荐使用）
	//   2.1 jQuery对象[索引值]
	var domObject1 = $('div')[0];
	console.log(domObject1);

	//   2.2 jQuery对象.get(索引值)
	var domObject2 = $('div').get(0);
	console.log(domObject2);

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

案例：开关灯

<body>
	<button>开灯</button>
	<button>关灯</button>
	<img src="images/xx.jpg"/>
</body>

<script src="jquery-1.12.4.js"></script>
<script>
	$function(){
    
		//需求：给按钮们添加事件：设置body的背景色
	
		//1.获取到按钮们
		var btns = document.getElementsByTagName("button");
		//console.log(btns);

		//2.给关灯按钮设置点击事件
		//dom
		btn[1].onclick = function(){
    
			$('body').css('backgroundColor','black');
		}
		
		//3.给开灯按钮设置点击事件
		//jquery
		$(btns[0]).click(function(){
    
			$('body')[0].style.backgroundColor = 'white';
		});
	});
</script>

设置获取文本内容text()

<body>
	<input type="button" value="获取" id="getBtn"/>
	<input type="button" value="设置" id="setBtn"/>
	
	<div id="div1">我是一个div标签
		<p>我是一个p标签<span>span1</span></p>
	</div>
	
	<div id="div1">我是一个div2标签
		<p>我是一个p2标签<span>span2</span></p>
	</div>
</body>

<script src="jquery-1.12.4.js"></script>
<script>
	$(function(){
    
		//text();  获取和设置文本的

		//1.获取文本: text()方法不给参数
		$('#getBtn').click(function(){
    
			//1.1 获取id为div1这个标签的文本
			//会获取到这个标签中所有的文本，包括后代元素的文本
			console.log($('#div1').text());
			
			//1.2 获取标签为div的元素的文本
			//包含了多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到
			console.log($('div').text());
		});
		
		//2.设置文本: text()方法给参数，参数就是要设置的文本
		$('#setBtn').click(function(){
    
			//2.1 给id为div1的这个标签设置文本
			//会覆盖它原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的
			$('#div1').text('我是新设置的文本');
			$('#div1').text('我是新设置的文本<a>我是连接</a>');
			
			//2.2 给标签为div的元素设置文本
			//包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom元素都设置上。
			$('div).text('设置的文本');  //隐式迭代
		});
	});
</script>

设置获取样式css

  • 功能：设置或者修改样式，操作的是style属性
  • 操作单个样式
//name:需要设置的样式名称
//value:对应的样式值
$obj.css(name,value);
//使用案例
$('#one').css('background','gray');//将背景色修改为灰色
  • 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
//使用案例
$('#one').css({
   
	'background':'gray',
	'width':'400px',
	'height':'200px'
});
  • 获取样式
//name：需要获取的央视名称
$obj.css(name);
//案例
$('div').css('background-color');

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

  1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取操作的时候，如果是多个元素，那么值会返回第一个元素的值
<style>
	#div1{
    
		height: 200px;
		background-color: pink;
		border: 2px solid red;
	}
</style>
<body>
	<input type="button" value="获取" id="getBtn"/>
	<input type="button" value="设置" id="setBtn"/>
	
	<div id="div1" style="width:200px"></div>
	<div id="div2" style="width:300px"></div>
	<div id="div3" style="width:400px"></div>
</body>

<script src="jquery-1.12.4.js"></script>
<script>
	$(function(){
    
		//css()方法： 设置/获取样式
		
		//1.获取样式：css()方法设置参数为要获取的样式名
		$(#getBtn').click(function(){
    
			//1.1 获取id为div1这个元素的样式
			console.log($('#div1').css('width'));
			console.log($('#div1').css('height'));
			console.log($('#div1').css('background-color'));
			console.log($('#div1').css('backgroundColor'));
			console.log($('#div1').css('border'));
			//在ie浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框。
			console.log($('#div1').css('border-top-width'));

			//1.2 获取标签为div的元素们的样式
			//获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
			console.log($('div').css('width'));  //200px
		});
		
		//2.设置样式:css()方法要给样式名和样式值
		//设置的样式是行内样式
		$('#setBtn').click(function(){
    
			//2.1 给id为div1的这个元素设置样式
			//设置单样式
			$('#div1').css('width','300px');
			$('#div1').css('height','300');
			$('#div1').css('backgroundColor','red');
			$('#div1').css('border','10px solid green');
			
			//设置多样式
			$('#div1').css({
    
				width:300,
				'height':'300px',
				'background-color':'green',
				'border':10px solid red'
			}）;
			
			//2.2 给标签为div的元素们设置样式
			$('div').css({
    
				width:300,
				'height':'300px',
				'background-color':'green',
				'border':10px solid red',
				'margin-top':10px
			}）;
		});
		
	});
</script>

jquery选择器

什么是jQuery选择器

  • jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
    注意：jQuery选择器返回的是jQuery对象。
  • jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
    【查看jQuery文档】
  • jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
    所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号
名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
全选选择器 $(‘*’); 获取所有元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称 用法 描述
子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

基础选择器和层级选择器案例代码

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
   
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

过滤选择器

名称 用法 描述
:eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

筛选选择器(方法)

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

名称 用法 描述
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:odd $(‘li:odd’) 获取到的li元素，选择索引号为奇数的元素
:even $(‘li:even’) 获取到的li元素，选择索引号为偶数的元素

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

案例代码

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
   
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

知识铺垫

  • jQuery 设置样式
$('div').css('属性', '值')
  • jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
  • 隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作
  • 链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

【案例：下拉菜单】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
最低0.47元/天 解锁文章
qq_43293778
关注
专栏目录
JQuery 入门 - 附案例代码
wuyxinu的博客
12-23 6万+
为什么要学jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。 遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样，非常灵活 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动...
jquery基础例子
小雨夹雪
03-17 1302
1.jquery标签页.html tab标签页 * { padding: 0; margin: 0; } ul { list-style-type: none; } body { margin:
jQuery基础案例分析（初学者入门精通最佳案例）
01-03
jQuery基础案例分析（初学者入门精通最佳案例），内容丰富，一切用代码说话。 通常，学习一个技术从基础一点点学识一个很慢的学习过程，即便学会了也编不出东西来。通过简单的案例来学习，分析代码为什么这么写，其实是上手编程的最佳选择，本案例就是一些简单易懂的案例，为你打造坚实的jQuery基础，涉及jQuery的各个方面，很值得学习和收藏！ 本例包含： 1.认识jQuery 2.jQuery选择器 3.jQuery中的DOM操作 4.jQuery中的事件和动画 5.jQuery对表单、表格的操作及更多应用 6.jQuery与Ajax的应用 7.jQuery插件的使用和写法 8.用jQuery打造个性网站 9.jQuery Mobile 10.jQuery各个版本的变化 11.jQuery性能优化和技巧 12.jQuery查询手册
jQuery实例
weixin_33831196的博客
03-02 164
http://www.w3cschool.cc/jquery/jquery-examples.html ----------------------------------------------------- jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 $("p").hide() 演示 jQuery 的...
JQuery基础案例
深耕java的博客
03-28 142
案例一：隔行换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow $
jquery飞机大战-案例.rar
03-01
《jQuery飞机大战：一款入门级JavaScript游戏开发案例》 在编程世界中，JavaScript与jQuery库的结合被广泛用于创建交互式网页元素。本案例“jQuery飞机大战”正是一个利用这两种技术构建的简单游戏，旨在帮助初学者...
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
jquery入门培训及案例
08-27
**jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery，开发者可以更高效地编写代码，提升网页的交互性和用户体验...
JQuery基础案例大全
01-02
JQuery是现在最流行的Ajax框架；本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括：选择器；Dom操作；事件；动画；Ajax操作；是一个非常容易上手的代码案例。送给初学者。--邵老师
1 Jquery 基础案例
jiangjun_feng的博客
08-05 149
1.全选和全不选 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js"></script> <script> //首先，事件已经被标签属性绑定，只要实现方法就行 function selectAll(targ
JQuery的几个简单小案例（基础）
暮光乐鱼的博客
10-11 818
JQuery的几个简单小案例 实现表格的的隔行换色 实现复选框的全选与全不选 QQ表情的选择 多选下拉列表的左右移动 实现表格的的隔行换色 需求：事先制作一个如图所示的table表格，将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow 分析 用过滤选择器获取数据行tr标签，选择奇偶数行，分别设置背景 预先编写的表格 <!DOCTYPE html> ...
jQuery 实例
世事如棋__2016的博客
02-19 862
* 提示：ready() 函数不应与 一起使用。    *  jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。       可以通过下面的标记把 jQuery 添加到网页中：    1.允许使用以下三种语法：     1.$(document).ready(function)     2.$().ready(function)
jQuery 实例
m0_58492934的博客
08-04 358
你想增进 jQuery 技能吗？以下是jQuery的各种使用实例，快来看看你掌握了哪些？
jquery实例
只为那一份执着
12-23 797
    pageEncoding="utf-8"%>http://www.w3.org/TR/html4/loose.dtd">Insert title here$(document).ready(function() { //$是JQuery的别名 //按照标签去找对象 $("a").click(function() {  alert("H
jQuery入门2：省市联动案例解析与节点操作详解
"jQuery入门2教程专为零基础初学者设计，以案例教学和深入解析为主，旨在帮助读者掌握jQuery的基础知识和实用技巧。课程从整体介绍开始，通过实际操作案例让学生了解如何在实践中学习。主要内容分为两部分： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值