jQuery核心功能详解-CSDN博客

本文链接：https://blog.csdn.net/object_oriented/article/details/102386002

jquery是一个javascript函数库，它提倡少写多做（write Less，Do More）。

jquery包含的主要功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

一、 HTML元素选取

jquery有两种方式可以进入：可以执行多次，不会被覆盖，当Dom结构加载完成即可执行包裹代码

$(document).ready(function(){

    ......
})
等同于

$(function(){

    .......
})

javascript的入口函数：只能执行一次，下次执行会被覆盖，需要等整个页面资源加载完成才可以执行包裹代码。

window.onload = function(){

    .......
}

jquery获取dom元素是通过选择器进行获取的：

获取id：$('#box')

获取class：$('.box')

获取tagname：$('div')

通过属性获取：$('[href]')

二、html元素操作：

1.获取html元素的内容

text();输出元素的内容不包含元素

<div class="box">
	<p>我是p标签</p>
	<a href="">我是a标签</a>
	<input type="text" value="hahahah"/>
</div>

		
<script type="text/javascript">
	$(function(){
		var text = $('.box').text();
		console.log(text)
			
	})
		
</script>
输出：
我是p标签
我是a标签

html（）；输出标签加内容

<div class="box">
	<p>我是p标签</p>
	<a href="">我是a标签</a>
	<input type="text" value="hahahah"/>
</div>

		
<script type="text/javascript">
	$(function(){
		var text = $('.box').html();
		console.log(html)
			
	})
		
</script>
输出：
	<p>我是p标签</p>
	<a href="">我是a标签</a>
        <input type="text" value="hahahah">

val（）；获取input框的value值

2.attr（)；获取元素的属性值

<div class="box" value="hehhe">
	<h3>获取元素的属性attr（）</h3>
	<p>我是p标签</p>
	<a href="">我是a标签</a>
	<input type="text" value="hahahah" name="name"/>
</div>

		
<script type="text/javascript">
     $(function(){
	var name=  $('.box input').attr('name');
	alert(name);//name
	var value =   $('.box').attr('value');
	alert(value);//hahahah
    })
		
</script>

3.添加元素：append() 和 prepend() 方法，after() 和 before() 方法

prepend,和before都是向前添加，但是prepend是添加到元素内部最前面，before是添加到元素外部前面

append和after都是向后追加，append是追加到元素内部最后，after是追加带元素外面的后面

<div class="box" value="hehhe">
	<h3>append（），prepend（），after（），before（）</h3>
	<p>我是p标签</p>
	<a href="">我是a标签</a>
</div>

		
<script type="text/javascript">
	$(function(){
		var box = $('[value="hehhe"]');
		//console.log(box.text());
		box.append("append添加")
		box.prepend("<span>prepend添加</span>")
		box.before("<span>before添加</span>")
		box.after("<span>after添加</span>")
	})
		
</script>

4.删除元素remove，empty

<div class="box" value="hehhe">
	<h3>删除元素empty，remove</h3>
	<p>我是p标签</p>
	<a href="">我是a标签</a>
</div>

		
<script type="text/javascript">
	$(function(){
	    $('.box').empty();//删除元素内部的子元素

            $('.box').remove();//删除当前元素及其内部元素

	})
		
</script>

5.addClass(),removeClass(),toggleClass()

<div class="box .cor" value="hehhe">
    <h3>删除元素empty，remove</h3>
    <p>我是p标签</p>
    <a href="">我是a标签</a>
			
</div>

		
<script type="text/javascript">
	$(function(){
		$('.box').addClass('bg');//添加类
		$('.box').removeClass('cor');//删除类
		$('.box').append("<button class='btn'>点我改变颜色</button>")
		$('.btn').click(function(){
			$('.box').toggleClass('bg2')//添加删除类切换
		})
	})
		
</script>

三、css操作

1.css（）方法改变样式

<div class="box" value="hehhe">
	<h3>css方法</h3>
	<p>我是p标签</p>
	<a href="">我是a标签</a>
			
</div>

		
<script type="text/javascript">
	$(function(){
		//$('.box').css("background","pink");//只改变一个样式
		$('.box').css({"background":"pink","font-size":"18px"});//改变多种样式使用json格式
		//width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
		 //height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
		//innerWidth() 方法返回元素的宽度（包括内边距）。
		//innerHeight() 方法返回元素的高度（包括内边距）。
	        //outerWidth() 方法返回元素的宽度（包括内边距和边框）。
	         //outerHeight() 方法返回元素的高度（包括内边距和边框）。			                                                                $('.box').css({"height":"200px","padding":"20px","margin":"10px","border":"1px solid #ccc"});
			   alert("width="+$('.box').height());//200（不包括内边距、边框或外边距）
			   alert("innerHeight="+$('.box').innerHeight());//240（包括内边距）
			    alert("outerHeight()="+$('.box').outerHeight());//242（包括内边距和边框）

	})
		
</script>

四、HTML事件函数

1.常见鼠标事件：

click（），dbclick（），hover（），mouseenter（），mouseleave（）

·                <div class="box" value="hehhe">
			<h3>鼠标点击事件</h3>
			<p>我是p标签</p>
			<a href="">我是a标签</a>
		</div>
		<span>双击</span>

		
		<script type="text/javascript">
			$(function(){
				$('.box').click(function(){
					alert("click box")
				});
				$('span').dblclick(function(){
					alert("dblclick box")
				});
				$('.box a').hover(function(){
					alert("hover a");

				});
				$('.box p').mouseenter(function(){
					alert("mouseenter p");

				});
				$('.box p').mouseleave(function(){
					alert("mouseleave p");

				});

			})
		
		</script>

2.常见的键盘事件keypress，keydown，keyup

                <input type="text" />
		<script type="text/javascript">
			$(function(){
				$('input').keypress(function(){
					
					$(this).css("color","#000");
				
				});
				$('input').keydown(function(){
					$(this).css("color","red");
								
				});
				$('input').keyup(function(){
					$(this).css("color","green");
					
				
				});
			})
		
		</script>

3.表单事件 change，focus，blur，submit

                <h3>表单事件focus，blur，change，submit</h3>
		<form class="box">
			<p>用户名：<input type="text" name="name" placeholder="请输入用户名"/></p>
			<p>密码：<input type="password" name="password" placeholder="请输入密码"/></p>
			<p><input type="submit" /></p>
		</form>
		<script type="text/javascript">
			$(function(){
				$('.box').submit(function(){
					alert("确认提交")
				});

				$('[name="name"]').change(function(){
					alert("检查用户名是否合法")
				})
				$('[name="name"]').focus(function(){
					$(this).attr("placeholder"," ");
				})
				$('[type="password"]').blur(function(){
					alert("验证密码")
				})


			})
		
		</script>

4.文档窗口事件 resize，scroll

                <h3>文档窗口事件resize，scoll</h3>
		<div class="box">box</div>
		<script type="text/javascript">
			$(function(){
				$(window).resize(function(){
					alert("resize");
				});
				$(window).scroll(function(){
					alert("scroll");
				});

			})
		
		</script>

五、特效和动画

1.hide(),show()，toggle()显示隐藏

                <div class="box" value="hehhe">
			<h3>show,hide,toggle</h3>
			<p>我是p标签</p>
			<a href="">我是a标签</a>
			
		</div>
			<button class="btn">点我toggle</button>
			<button class="btn1">点我show</button>
			<button class="btn2">点我hide</button>

		
		<script type="text/javascript">
			$(function(){
				$('.btn').click(function(){
					$('.box').toggle();
				});
				$('.btn1').click(function(){
					$('.box').show();
				});
				$('.btn2').click(function(){
					$('.box').hide();
				});
				
			})
		
		</script>

2.淡入淡出：fadeIn（淡入），fadeOut（淡出），fadeToggle（淡入淡出切换），fadeTo（透明度由1变0）

调用格式fadeIn（淡入），fadeOut（淡出），fadeToggle（淡入淡出切换）是一样的

对象.fadeIn(speed,callback)参数可选

对象.fadeTo(speed,opacity,callback) speed必选其他参数都是可选的

                <div class="box" value="hehhe">
			
		</div>
			<button class="btn">点我fadeIn</button>
			<button class="btn1">点我fadeOut</button>
			<button class="btn2">点我fadeToggle</button>
			<button class="btn3">点我fadeTo</button>
		
		<script type="text/javascript">
			$(function(){
				$('.btn').click(function(){
					$('.box').fadeIn(2000,function(){
						$(this).css({"background":"#666"});
					});
				});
				$('.btn1').click(function(){
					$('.box').fadeOut(3000,function(){
						$(this).css({"background":"red"});
					});
				});
				$('.btn2').click(function(){
					$('.box').fadeToggle(2000);
				});
				$('.btn3').click(function(){
					$('.box').fadeTo(2000,0.5,function(){
						$(this).css({"opacity":"1","transition":"1s"});
					});

				});
				
			})
		
		</script>

3.滑进滑出：slideUp,slideDown,slideToggle

                <div class="box" value="hehhe">
			
		</div>
		<button class="btn">点我slideDown</button>
		<button class="btn1">slideUp</button>
		<button class="btn2">点我slideToggle</button>
		<script type="text/javascript">
			$(function(){
				$('.btn').click(function(){
					$('.box').slideDown(2000,function(){
						$(this).css({"background":"#666"});
					});
				});
				$('.btn1').click(function(){
					$('.box').slideUp(3000,function(){
						$(this).css({"background":"red"});
					});
				});
				$('.btn2').click(function(){
					//$('.box').slideUp('slow').slideDown();
					$('.box').slideToggle('slow')
				});
				
				
			})
		
		</script>

4.stop停止动画

                <div class="box" value="hehhe">
			
		</div>
		<button class="btn">点我stop</button>
		<button class="btn1">点我stop1</button>
		<button class="btn2">点我滑动</button>
		<script type="text/javascript">
			$(function(){
				$('.btn2').click(function(){
					$('.box').slideUp('slow').slideDown(3000);

				});
				$('.btn').click(function(){
					$('.box').stop(true);
				});
				$('.btn1').click(function(){
					$('.box').stop(false,true);
				});
			})
		
		</script>

5.自定义动画：使用animate里面的css属性时marginLeft使用驼峰命名，在写像素值px单位可不加jquery内部会自行处理。

animate( properties [, duration ] [, easing ] [, callback ] )第一个是必选项，其余都是可选

properties ：是css属性键值对，

duration：包含slow，normal，fast或者自定义时间，

easing：包含swing和linear

callback：是回调函数完成动画后执行

                <div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<button class="btn">点我</button>
		<button class="btn1">点我返回</button>
		<script type="text/javascript">
			$(function(){
				var flag = true;
				$(".btn").click(function(){
					$('.box').animate({
						marginLeft:'+=10%',
						opacity:0.5
					},'slow','swing',changeBg(flag))
					flag = !flag;
				})
				$(".btn1").click(function(){
					$('.box').animate({
						marginLeft:'-=10%',
						opacity:1
					},'slow','swing',changeBg(flag))
					flag = !flag;
				})
				var changeBg = function(flag){
					if(!flag){
							$('.box').css("background","green");				
					}else{
						$('.box').css("background","pink");
					}
				}
			})
			
		</script>

jQuery学习（一）