jQuery基础学习

最新推荐文章于 2024-07-14 15:54:59 发布

hazel54

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量326

点赞数

分类专栏： Javascript 文章标签： jquery class function div javascript border

本文链接：https://blog.csdn.net/hazel54/article/details/6722065

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、下载地址

jquery下载地址：http://jquery.com/

Production压缩版下载地址：http://code.jquery.com/jquery-1.6.2.min.js

Development未压缩版下载地址：http://code.jquery.com/jquery-1.6.2.js

二、基础学习

1、引入jquery库方式

在body下添加<script src="jquery-1.6.2.min.js"></script>,即获取jquery-1.6.2.min.js文件的存储路径。

2、使用原生javascript进行onclick事件绑定

<body>
    <span id="s">aaa</span>
    <script>
    var _span=document.getElementById('s');
    _span.οnclick=function(){
           alert(_span.innerHTML);
    };
    </script>
</body>

*注释： getElementById: 通过id获取内容； innerHTML: 用来设置或获取位于对象起始和结束标签内的HTML；

*运行：当鼠标点击aaa时会弹出span标签内的所有内容。

3、$代表jQuery

         $('.ds')
          ...
         ;

和

         jQuery('.ds')
          ...
         ;

的效果是一样的。

4、应用jquery的相关例子

例1：使aaa字体颜色为红色，并添加绿色边框。

<body>
    <span id="s"><span class="ds">aaa</span></span>
    <span class="ds">bbb</span>
    <script src="jquery-1.6.2.min.js"></script>
    <script>
        $('#s .ds')
        //$('.ds')   所有定义了class="ds"的标签都执行此命令
        //$('.ds:eq(1)')  仅第二个定义了class="ds"的标签执行此命令
        //$('.ds:not(#s .ds)') 仅不是在id="s"标签下的“ds”类执行此命令；
        .css({
           'color':'red',  
           'border':'1px solid green'
            });
    </scipt>
</body>

运行结果为：。

补充：$('.ds:eq(1)')意为在所有class="ds"的标签中，仅选择第二个（数组序号从0开始，0,1,2...)执行此命令，而$('.ds:not(#s.ds'))意为在所有class="ds'的标签中，排除在id="s"下的为ds的类。

例2：使bbb字体颜色为红色，并添加绿色边框，同时点击bbb时输出该标签内全部内容。

<body>
<span id="s"><span class="ds">aaa</span></span>
<span class="ds">bbb</span>
<script src="jquery-1.6.2.min.js"></script>
<script>
	$('.ds:eq(1)')
	.css({'color':'red',
		  'border':'1px green solid',
		  'cursor':'pointer'
		 })
	.click(function(){
	     alert($(this).html());
			 });
</script>
</body>

*注释：$(this)其中的this即为当前位置获取最近的选择器；

在jQuery中，click相当于javascript中的onClick，即鼠标单击事件；

jQuery具有连续性，用点隔开，比如：

             $('.ds:eq(1)')
             .css(
             ...
                 ）
             .click(
             ...
                 );

但是注意：只有在最有一个事件结束时用分号，以上都不用。

例3：所有含有 class="ds' 的文本颜色为红色，边框为绿色，同时点击aaa时，输出该标签全部内容。

<body>
<span id="s"><span class="ds"><b>aaa</b><b>ccc</b></span></span>
<span class="ds">bbb</span>
<script src="jquery-1.6.2.min.js"></script>
<script>
$('.ds')
.css({
      'color':'red',
      'border':'1px solid green'
     })
.filter(':eq(0)') //筛选出第一个class="ds"
.find('b')        //在第一个class="ds"标签下找到b标签
.not(':eq(1)')    //排除第一个class="ds"标签下的第二个b标签
.click(function(){
		alert($(this).html());
		 });
</script>
</body>

例4：利用jquery加active（鼠标滑过含有class="ds"标签时读取active样式，背景色变为黄色）

<html>
<head>
<style>
.active{background:yellow;}
</style>
</head>
<body>
    <span id="s"><span class="ds"><b>aaa</b><b>ccc</b></span></span>
    <span class="ds">bbb</span>
    <script src="jquery-1.6.2.min.js"></script>
    <script>
	$('.ds')
	.mouseover(function(){
		$(this).addClass('active');
	})
    .mouseout(function(){
		$(this).removeClass('active');			   
	});
	</script>
</body>
</html>

*注释： mouseover为鼠标滑过，mouseout为鼠标移开，还可以用mouseenter和mouseleave分别代替。

例5：当鼠标滑过aaa时显示某div区域，鼠标移开时隐藏。（相当于TAB切换等。）

<html>
<head>
<style>
.active{background:yellow;}
.hidden{display:none;}
</style>
</head>
<body>
    <a href="#" class="d" style="background:yellow;display:block;width:80px;height:30px;">aaaaaa</a>
    <div class="hidden" style="margin:100px;height:100px;width:100px;background:red;"></div>
    <script src="jquery-1.6.2.min.js"></script>
    <script>
	$('a')
	.mouseover(function(){
		$('div').show();
	})
    .mouseout(function(){
		$('div').hide();			   
	});
	</script>
</body>
</html>

*注释：还可以设置显示和隐藏时间等，show(1000), hide(1000),单位为毫秒。

例6：当鼠标滑过aaaaaa时div块淡入，移开淡出；当鼠标滑过bbb时div下拉块打开，移开收起。

<html>
<head>
<style>
.active{background:yellow;}
.hidden{display:none;}
</style>
</head>
<body>
    <a href="#" class="d" style="background:yellow;display:block;width:80px;height:30px;">aaaaaa</a>
    <a href="#" class="ad" style="background:yellow;display:block;width:80px;height:30px;">bbb</a>
    <div class="hidden" style="margin:100px;height:100px;width:100px;background:red;"></div>
    <script src="jquery-1.6.2.min.js"></script>
    <script>
	$('.d')
	.mouseover(function(){
		$('div').fadeIn();
	})
    .mouseout(function(){
		$('div').fadeOut();			   
	});
	$('.ad')
	.mouseover(function(){
		$('div').slideDown();
	})
	.mouseout(function(){
		$('div').slideUp();
	})
	</script>
</body>
</html>

*注释：fadeIn fadeOut slideDown slideUp 同样可以写入时间参数。

hazel54

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础学习

一、下载地址 jquery下载地址：http://jquery.com/ Production压缩版下载地址：http://code.jquery.com/jquery-1.6.2.min.js Development未压缩版下载地址：ht
复制链接

扫一扫