jQuery Note

最新推荐文章于 2021-08-03 01:38:39 发布

stonekity

最新推荐文章于 2021-08-03 01:38:39 发布

阅读量963

点赞数

分类专栏： jQuery 文章标签： jQuery 函数 HTML

本文链接：https://blog.csdn.net/Dream_loving/article/details/8908812

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于jQuery常用的一些方法

1. 将括号内转化为jQuery对象

$() == jQuery() ;

2.滑动面板(sliding panel)特效

<div class="panel">
        <br />
        <br />
        <p>Now you see me!</p>
        </div>
        <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>

 $(document).ready(function()
	{
    		$('.pull-me').click(function()
    		{
        		$('.panel').slideToggle('slow');
   		 });
	});

3. 插入内容append/prepend, appendTo/prependTo

$("body").append("<p>...</p>");  // 在末尾插入内容
$("body").prepend("<p>...</p>"); // 在开头插入内容
$("<p>我将被插入到末尾</p>").appendTo("body");//将其插入末尾
$("<p>我将被插入到开头</p>").prependTo("body");//将其插入开头

4. 定位before/after

$('#one').after('<p>Add some words after the Div #1</p>'); //在一个元素的后面添加一段文字
$('#two').after($('p'));  //定位已经存在的元素

5. 移除元素empty/remove

$('p').remove();  //删除元素的内容和他本身
$('ol').empty();  //删除元素的内容

6. 添加\删除一个类Adding\Removing a class()

$(document).ready(function(){
    $('#text').click(function(){
        $(this).addClass('highlighted');
    });
});

7. 切换类 toggleClass

$(this).click(function(){
		$(this).toggleClass('highlighted');
	});

8. 改变CSS风格

$(document).ready(function(){
    		$("div").width("200px");
    		$("div").height("200px");
    		$("div").css("border-radius", "10px");
	});

9. 修改html内容

	<body>
		<h2>To Do</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<div id="button">Add!</div>
		<br/>
		<div class="list"></div>
	</body>

$(document).ready(function(){
		var toAdd = $('input[name=checkListItem]').val();
		$("div").append('<div class="item">'+ toAdd + '</div>')	

	});

10. jQuery event

点击事件： .click()

经过事件： .hover()

双击事件：. dblclick()

11. 鼠标双击事件 dblclick()

$(document).ready(function(){
	    $('div').dblclick(function(){
        	$(this).fadeOut('fast');  //鼠标双击div即消失
    		});
	});

12. 鼠标进入和离开事件 mouseenter() , mouseleave()

$(document).ready(function(){
   $('div').mouseenter(function(){
        $(this).fadeTo('fast', 1);
    });
    $('div').mouseleave(function(){
        $(this).fadeTo('fast', 0.25);
    });
});

13. 获得焦点事件 focus()

$(document).ready(function(){
    		$('input').focus(function(){
       			 $(this).css('outline-color', '#FF0000');
    		});
	});

14. .css() 改变element的css风格，有两个参数，第一个参数是css选择器，第二个参数是元素对应的值

$('input').css('outline-color', '#FF0000');

15. 按下键盘事件 keydown()

$(document).ready(function(){
    		$(document).keydown(function(){
        		$('div').animate({left: '+=10px'}, 10);
   		 });
	});

16. 动画函数.animate() 有两个参数，第一个参数是效果，第二个参数是响应时间，值越小，反应越快

$('div').aanimate({left: '+=10px'}, 10);  //让div向右移动10个像素

17. 识别是哪一个键被按下，并作出不同的动画效果，达到键盘控制的作用

控制图片上下左右移动，W, S, A, D 分别表示up, down, left, right

$(document).ready(function() {
    		$(document).keydown(function(key) {
        		switch(parseInt(key.which,10)) {
			case 65:
				$('img').animate({left: "-=10px"}, 'fast');
				break;
			case 83:
		                $('img').animate({top: "+=10px"}, 'fast');	
				break;
			case 87:
				$('img').animate({top: "-=10px"}, 'fast');
				break;
			case 68:
				$('img').animate({left: "+=10px"}, 'fast');
				break;
			default:
				break;
			}
		});
	});

18. 文档生成时即隐藏元素

$(document).ready(function(){
    		$('div').hide();
	});

19. 文档生成时让元素的top margin在一秒钟内增加100个像素，动画效果

$(document).ready(function(){
   		 $('img').animate({top: "+=100"}, 1000);
	});

Continue . . .

stonekity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Note

关于jQuery常用的一些方法1. 将括号内转化为jQuery对象$() == jQuery() ;2.滑动面板(sliding panel)特效 Now you see me! Slide Up/Down $(document).ready(function() {
复制链接

扫一扫