jQuery学习笔记——初识jQuery

最新推荐文章于 2022-03-20 14:45:56 发布
最新推荐文章于 2022-03-20 14:45:56 发布
阅读量423 收藏
点赞数
分类专栏： jQuery 文章标签： jquery addClass siblings hide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/november_chopin/article/details/77181050
版权 
<!--
	作者：1377378268@qq.com
	时间：2017-08-11
	描述：jQuery基础介绍与实例
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.level1{
				list-style: none;
			}
			.level2{
				list-style: none;
			}
		</style>
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".level1 > a").click(function(){
					$(this).addClass("current")//添加样式
					.next().show()//下一个元素显示
					.parent().siblings().children("a").removeClass("current")//元素的父元素的所有兄弟元素的<a>去掉current样式
					.next().hide();
					return;
				});
			});
			/*
			 * jQuery对象转化成DOM对象
			 */
			var $level = $(".level1");//jQuery对象
			//方法1
			var level = $level[0];//DOM对象
			//方法2
			var level2 = $level.get(0);
			/*
			 * DOM对象转换成jQuery对象
			 */
			var menu = document.getElementById('box');//DOM对象
			var $menu = $(menu);//jQuery对象
			
		</script>
	</head>
	<body>
		<div id="box">
			<ul class="menu">
				<li class="level1">
					<a href="#none">衬衫</a>
					<ul class="level2">
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">短袖衬衫</a></li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">卫衣</a>
					<ul class="level2">
						<li><a href="#none">开襟卫衣</a></li>
						<li><a href="#none">开襟卫衣</a></li>
						<li><a href="#none">开襟卫衣</a></li>
						<li><a href="#none">开襟卫衣</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>









                

        

        

    

  


    

      

        

            

              
                
                  jsfantasy
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
jQuery笔记 (完整详细版)

				
			

			

				

					小白在线学前端的博客
				

				

					08-10
					
					1870
					
				

			

		

		

			
				
第一章 初识jQuery
一、jQuery简介


是什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.


2.常见的javascript库?


入口函数
JQuery()和$()都称之为jq选择器环境，在里面添加上相关的选中器即可，就可以获取匹配元素
原生：w

			
		

	



                

              
                



	

		

			

				
					
初识jQuery 笔记分享

				
			

			

				

					weixin_45606163的博客
				

				

					12-10
					
					129
					
				

			

		

		

			
				
初识jQuery
1.jQuery概述（jQ）
jQuery是JS流行库之一
2006年诞生 约翰·莱西格
口号：write less , do more
风靡10余年
优势：


强大的jQ选择器（jQ借助CSS选择器的思想来实现节点选中）
支持大多数的CSS选择器语法 还有自行研制了一些高级选择器


出色的DOM封装
jQ封装了大量的方法 弥补了JS在一些功能上的缺失和缺陷
解决了一些兼容性...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery学习笔记一(初识jQuery)

				
			

			

				

					moluchase的专栏
				

				

					10-28
					
					430
					
				

			

		

		

			
				
一.下载jQuery包
下载好的jQuery包解压，里面含有.js的包，这里使用min的js文件
现在是在html中使用，以该html页面的目录来查找js文件
如我在存放html文件的目录下建一个lib包，然后将jquery.min.js文件放在该lib包中。
则再html中如下使用，放在head中


二.Hello World




	
	第一个简单的JQuery程序
	


			
		

	





	

		

			

				
					
JQuery学习笔记（一）：初识JQuery

				
			

			

				

					qq_37011048的博客
				

				

					07-16
					
					437
					
				

			

		

		

			
				
 

说明：本人正在学习JQuery知识，以下内容来自于我对B站李南江老师的视频教程《李南江亲授-jQuery+Ajax从放弃到知根知底》的总结，以当作自己的学习笔记。（顺便推荐一下这个教程，语速合我口味！）

 

1.JQuery是什么？



JQuery是一个JavaScript库。

Jquery=js+query:可以看出JQuery主要是用来做查询的。

write less ，do...

			
		

	



		

			
		



	

		

			

				
					
jquery学习笔记----初识jquery

				
			

			

				

					往前一步
				

				

					03-26
					
					849
					
				

			

		

		

			
				
jquery对象和dom对象


dom对象(documentobject model)文档对象模型
通过document.getElementById("")和document.getElementByNames("")得到的dom元素就是dom对象。例如：
vardomObj = document.getElementById("id"); // 获得DOM对象
varObjHTM

			
		

	





	

		

			

				
					
jquery 学习笔记源码 1第一个jquery

				
			

			

				

					04-03
				

			

		

		

			
				
《jQuery学习笔记源码——初识与实践》  在当今的Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...

			
		

	





	

		

			

				
					
bootstrap学习笔记之初识bootstrap

				
			

			

				

					01-19
				

			

		

		

			
				
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，...它基于jQuery框架开发，在jQuery框架的基础上进行了更为人性化和个性化的完善，形成了一套自己独有的网站风格，并兼容大部分j

			
		

	





	

		

			

				
					
不看后悔系列——JQuery学习笔记

				
			

			

				

					筱筱攻程师的博客
				

				

					04-24
					
					1894
					
				

			

		

		

			
				
文章目录初识jQuery1.jQuery下载地址1.2jQuery和JS的加载模式1.3jQuery冲突问题2.jQuery核心函数和工具方法2.1jQuery核心函数2.2jQuery对象2.3jQUery静态方法和实例方法2.4静态方法each2.5 map方法2.6 jQuery中的其它静态方法2.7 静态方法holdReady方法3. jQuery属性操作3.1 jQuery基本选择器3.1.1 基本选择器3.1.2 层次选择器3.2 jQuery过滤选择器3.2.1 基本过滤选择器3.2.2 内容

			
		

	





	

		

			

				
					
前端学习笔记——node.js

				
			

			

				

					lxy95512的博客
				

				

					03-20
					
					1453
					
				

			

		

		

			
				
初识 Node.js

什么是 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 中的 JavaScript 运行环境

注意： 浏览器是 JavaScript 的前端运行环境。

Node.js 是 JavaScript 的后端运行环境。

Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。



Node.js 可以做什么

Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 

			
		

	





	

		

			

				
					
【jQuery 学习笔记】初识jQuery

				
			

			

				

					lieaqnes_0707的专栏
				

				

					07-25
					
					281
					
				

			

		

		

			
				
官方网站 http://jquery.com/

下载页面  http://docs.jquery.com/Downloading_jQuery


基本使用



  
    
    Demo
  
  
    jQuery
    
    
      
    
  
上述html代码简单的调用了jquery的js库没有做任何操作，主要src的路径要选择正确。

			
		

	





	

		

			

				
					
初识JQuery，上课笔记

				
			

			

				

					qq_28316183的博客
				

				

					09-21
					
					257
					
				

			

		

		

			
				
1.JQurey 基本应用


	function onChoose() {
		var username = $("#name").val();
		alert(username);
	}
	function onChooseA(obj) {
		//js原生态对象。
		//jq对象$(obj)，是经过包装的
		alert($(obj).val());
	}
	function onCho

			
		

	





	

		

			

				
					
初学jQuery学习笔记

				
			

			

				

					yangaoyuan1999的博客
				

				

					09-21
					
					90
					
				

			

		

		

			
				
1.jQuery是对原生js的一个封装库，它跟原生js是不抵触的
2.jQuery的入口函数

$(document).ready(function(){
console.log(‘入口函数完整写法’)；
})

3.jQuery的简写入口函数

$(function(){
console.log(‘入口函数简写’);
})

4.window.onload与$(function).ready的区别
①window.load只能声明一个，如果反复声明，
则会覆盖之前，jQuery入口函数可以声明多个，
并且

			
		

	





	

		

			

				
					
《初识JQuery总结》

				
			

			

				

					TAOTAOnice的博客
				

				

					07-08
					
					240
					
				

			

		

		

			
				
第五章：初识JQuery
JQuery是对JavaScript的封装，简化了JS代码，是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的
JQuery的优势：
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
引入Jquery库：

JQuery加载页面触发：

window.onload和$(document).ready区别：
window.onload只能有一个，没有简写方式，

			
		

	





	

		

			

				
					
jQuery初识总结

				
			

			

				

					weixin_47720233的博客
				

				

					07-21
					
					1039
					
				

			

		

		

			
				
jQuery初学总结
什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
为什么使用 jQuery ？
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大

			
		

	





	

		

			

				
					
jQuery入门总结---初识jQuery（一）

				
			

			

				

					xueyue616的博客
				

				

					06-07
					
					966
					
				

			

		

		

			
				
    之前编码工作，总是在遇到问题后，去百度查找解决方法，这样下来虽然能解决问题，但是知识不是很系统，因此跟着知识点系统的学习，（比如W3C、菜鸟教程等）看完之后如果不做记录，很快将会遗忘，So在学习的同时适当做下笔记，加深印象。    jQuery是轻量级JavaScript 库；如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务，通过使用 jQuery 应用 Ja...

			
		

	





	

		

			

				
					
初识jQuery

				
			

			

				

					JAVA52Lin的博客
				

				

					12-17
					
					211
					
				

			

		

		

			
				
一、认识jQuery库

1、js和jQuery的关系？

js是网页开发语言，jQuery是基于js的一种框架，也是对js对象和函数的封装。

2、创立者和时间，以及思想

jQuery是由美国人John Resig在2006年创建的。

设计思想：write  less,do more (写更少，做更多)。

3、jQuery能做什么？

访问和操作DOM元素
	控制页面样式
	对页面事件进行...

			
		

	





	

		

			

				
					
初识【jQuery】，入门必看！

				
			

			

				

					jingjing的博客
				

				

					08-13
					
					171
					
				

			

		

		

			
				
什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。
jQuery使用方式

直接下载并且通过script导入到代码中 。

<script src=”https://unpkg.com/jquery”></script>


npm导入：npm install jquery



			
		

	





	

		

			

				
					
初识jQuery重点总结

				
			

			

				

					妖精小狗的博客
				

				

					09-05
					
					763
					
				

			

		

		

			
				
jQuery简介：

jQuery由美国人John Resig于2006年创建；jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装；它的设计思想是write less,do more

 

jQuery的应用：

1. jQuery与其他JavaScript库：

jQuery；Bootstrap【也是一个比较好的框架，应用也比较广泛】；Zepto【...

			
		

	





	

		

			

				
					
jQuery学习笔记——事件

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。

1. 绑定事件
在 jQuery 中，我们可以通过以下方式来绑定事件：

```
$(selector).event(function(){
  // 事件处理程序
})
```

其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。

2. 多个事件绑定
我们可以通过 `on()` 方法来同时绑定多个事件：

```
$(selector).on({
  event1: function(){
    // 事件处理程序1
  },
  event2: function(){
    // 事件处理程序2
  }
})
```

这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。

3. 解除事件
如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法：

```
$(selector).off(event);
```

其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。

4. 事件委托
在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。

```
$(selector).on(event, childSelector, function(){
  // 事件处理程序
})
```

其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。

以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值