（十） Jquery的基本使用

一、引入

  • 注意：如果在index.js中有使用到JQuery.js 那么JQuery.js文件必须比index.js文件先引入，否则index.js文件中不能使用JQuery.js。
<script lang="javascript" src="js/lib/JQuery.js"></script>

<script lang="javascript" src="js/index.js"></sccipt>

二、使用

　　2.1 $(function(){ 内容 });

  • $()；JQuery 起始。相当于html中的 onload=“方法名（）；” 意思是html执行完之后在执行回调函数
  • function（） 回调匿名函数。
  • 另一种写法:
 $(document).ready(function(){
 alert("Jquery");
});

　　ps： 第一种写法是这种的简写。

　　2.2　　获取对象

<script type="text/javascript">
   $(function(){
	   var dom=document.getElementById("dom");   //DOM方式获取对象
	   dom.innerHTML="我是DOM对象";     

	   var jquery=$(‘#jquery‘);      //JQuery方式获取对象
	   jquery.html("我是Jquery对象");
   });
</script>
</head>
<body>
		<p id="dom"></p>
		<p id="jquery"></p>
</body>结果：

   解析：$(‘ ‘ ) : 选择器，详细后文讲解

2.3　　DOM对象与JQuery对象的转换

  • DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;
  • 如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，例:

　　　　$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法;

　　　　上面的那段代码等同于:

　　　　document.getElementById("foo").innerHTML;

　　　　注意：在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr ("checked")　　　　之类的 jQuery方法来代替。同样，DOM对象也不能使用jQuery方法。

  • jquery对象转换成dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。

可能有人会觉得奇怪，怎么是用下标呢，没错，jquery对象就是一个数组对象.

var $cr=$("#cr"); //jquery对象

var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);

  • dom对象转换成jquery对象

对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);

var cr=document.getElementById("cr"); //dom对象

var $cr = $(cr); //转换成jquery对象

<script type="text/javascript">
   $(function(){
	   var dom=document.getElementById("dom");   //DOM方式获取对象
	   dom.innerHTML="我是DOM对象";     

	   var jquery=$(‘#jquery‘);      //JQuery方式获取对象
	   jquery.html("我是Jquery对象");

	   var a=jquery[0];
	   a.innerHTML="我是从jquery转过来的DOM对象";   //JQuery对象无法使用innnerHTML属性

	   var b=$(dom);
	   b.html("我是DOM转过来的JQuery对象");　　　　//DOM对象无法使用html（）方法
   });
</script>
</head>
<body>
		<p id="dom"></p>
		<p id="jquery"></p>
</body>结果：

三、JQuery选择器

3.1　　基本选择器 ：

id选择器一次只能选择一个元素，因为id是唯一的。

<script type="text/javascript">
  	$(function(){
  		$(‘#a‘).text("id selected");
  		$(‘.b‘).text("class selected");
  	});
</script>
</head>
<body>
		<p id="a"></p>
		<p class="b"></p>
		<p></p>
</body>结果：

<script type="text/javascript">      $(function(){          $(‘#a‘).text("id selected");          $(‘.b‘).text("class selected");          $(‘p,font‘).text("lalal");                });</script></head><body>        <p id="a"></p>        <p class="b"></p>        <font></font>            <p></p></body>结果：

  • JQuery.css() 使用
<script type="text/javascript">
  	$(function(){
  		$(‘#a‘).css("background-color","red");
  		$(‘#a‘).css({"border-style":"solid","border-color":"blue"});
  	});
</script>
</head>
<body>
		<p id="a">aaa</p>
		<p class="b"></p>
		<font></font>
		<p></p>
</body>结果：

解析： JQuery.css()对元素设置一个样式和设置多个样式的不同点就是设置多个样式时需要用花括号｛｝括起来，用冒号（：）来分开属性与值。

3.2　　层次选择器

$(‘div> ul ‘)   :选择div中的所有ul子节点
$(‘div    ul ‘)    :选择div中所有ul节点。
$(‘#one+*‘).css("color","red");   ：选择id为one的下一个任意类型的标签
$(‘#one+li‘).css("color","red")：选择id为one的下一个li标签 ，如果下一个不是li标签则获取空对象。
 $(‘#one~*‘).css("color","red");  选择id为one的所有任意兄弟节点。

3.3　　过滤选择器（都是以：开头）

<script type="text/javascript">
  	$(function(){
  		$(‘.a‘).css({"border-style":"solid","border-color":"blue"});
  		$(‘.a‘).eq(1).css("background-color","red");    //等价于  $(‘.a：eq（1）‘).css("background-color","red");
  	});
</script>
</head>
<body>
		<p class="a">aaa</p>
		<p class="a">bbb</p>
		<font></font>
		<p></p>
</body>结果：

$(‘ul>li:odd‘).css("color","red"); 选择ul的子节点li 且索引数为奇数的节点。

$(‘ul>li:even‘).css("color","red"); 选择ul的子节点li 且索引数为偶数的节点。

$(‘ul>li:not(.a)‘).css("color","red"); 选择ul中去除class为a的li标签子节点。

3.4　　内容过滤选择器 （都是以 ： 开头）

<script type="text/javascript">
  	$(function(){
  		$(‘.a:contains("a")‘).css("border-style","solid");
  	});
</script>
</head>
<body>
		<p class="a">aaa</p>
		<p class="a">bbb</p>
		<font></font>
		<p></p>
</body>结果：

3.5　　属性过滤选择器

<script type="text/javascript">
  	$(function(){
  		$(‘p[class="a"]‘).css("border-style","solid");
  	});
</script>
</head>
<body>
		<p class="a">aaa</p>
		<p class="b">bbb</p>
		<font></font>
		<p></p>
</body>结果：

3.6　　可见性过滤选择器

3.7　　子元素过滤选择器

3.8　　表单对象属性过滤选择器

<!-- 选择下拉列表，点击按钮隐藏 --><script type="text/javascript">
  	$(function(){
  		$(‘#but‘).click(function(){
  			$(‘:selected‘).hide();
  		});
  	});
</script>
</head>
<body>
		<form name="f">
			用户名:<input type="text" name="userName"/> <br/>
			密 码:<input type="password" name="passwd" /><br/>
			性 别:<select name="sex">
					<option >第一个</option>
					<option >第二个</option>
					<option >第三个</option>
					<option >第四个</option>
			</select><br/>
			<input type="button" value="隐藏选择的内容" id="but"/>
		</form>
</body>结果：

　　3.9　　表单选择器

四、JQueru方法

　　4.1　　attr（）

$(‘input‘).attr("value","提交"); 设置input标签的value值为“提交” 。

$(‘input‘).attr({"value":"提交","id":15}); 设置input标签的value值为“提交”，id为15。

<script type="text/javascript">
	$(function(){
		  $(‘p:eq(1)‘).attr("id","p1");
		 $(‘#p1‘).css("border-style","solid");
	});
</script>
</head>
<body>
		<p>aaa</p>
		<p>bbb</p>
</body>结果：

解析：  注意设置一个属性和多个属性的表达。$(‘input‘).attr({"value":"提交","id":15}); 设置input标签的value值为“提交”，id为15。

　　4.2　　创建节点并插入节点

　　　　4.2.1　　创建节点： $(‘<p></p>‘) 创建p标签 并转化为节点。引号不能少。

　　4.2.2　　插入节点（1）

  • append等方法插入的是子节点。

$(‘div‘).append($(‘<p>cccccc</p>‘)); 向div元素内部结尾处添加p标签。(在div元素内部的结尾添加..)

$(‘div‘).prepend($(‘<p>cccccc</p>‘)); 向div元素内部开始处添加p标签。(在div元素内部的开头添加...)

$(‘div>p:first‘).appendTo($(‘div‘)); 向div结尾处添加 div的第一个子p标签。（把...添加到div的结尾）

$(‘div>p:first‘).prependTo($(‘div‘)); 向div开始处添加 div的第一个子p标签。(把..添加到div的开头)

<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$(‘p‘).append(‘<b>hello world</b>‘);
		});

	});
</script>
</head>
<body>
		<p>我是第一行。</p>
		<p>我是第二行.</p>
		<button>点我添加内容</button>
</body>结果：

解析： append（）或者appendTo（）等插入的是子节点。

<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$(‘<b>hello</b>‘).appendTo(‘p‘);
		});
	});
</script>
</head>
<body>
		<p>我是第一行。</p>
		<p>我是第二行.</p>
		<button>点我添加内容</button>
</body>结果：

　　　　4.2.3　　插入节点（2）

  • 插入的是兄弟节点，而append等方法插入的是子节点。

$(‘div‘).after($("<font>aaa123</font>")); 将新创建的font节点加入到div节点之后。

　$(‘div‘).before($("<font>aaa123</font>")); 将新创建的font节点加入到div节点之前。

<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$(‘p‘).after(‘<b>hello world</b>‘);
		});
	});
</script>
</head>
<body>
		<p>我是第一行。</p>
		<p>我是第二行.</p>
		<button>点我添加内容</button>
</body>结果：

解析： after（）、before（）等方法插入的是兄弟节点。

　　4.3　　删除节点

  • $(‘div>p:eq(0)‘).remove(); 删除div中的第一个p子节点。
<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$(‘p:eq(0)‘).remove();
		});
	});
</script>
</head>
<body>
		<p>我是第一行。</p>
		<p>我是第二行.</p>
		<button>点我删除第一个节点</button>
</body>结果：

　　4.4　　复制节点

  • $(‘div>p‘).clone().appendTo($(‘tr‘)); 将div中所有为p标签的子节点复制为一个节点添加到td结尾处。

　　4.5　 替换节点

  • $(‘div>p‘).replaceWith($(‘<font>iloveyou</font>‘)); 用创建的font节点代替div中所有的p子节点

　　4.6　　包裹节点

  • $(‘div>p‘).wrap($("<b>ccccc</b>")); 将div中的所有p子节点都分别用b标签包裹起来，这样p标签也有b标签效果。

　　4.7　　html（）与text（）方法

<script type="text/javascript">
	$(function(){
			$(‘p‘).html("hello <b>world!!!</b>");

	});
</script>
</head>
<body>
		<p>aa</p>
</body>结果：

解析：显示的内容会解析标签。

<script type="text/javascript">
    $(function(){
        $(‘p‘).text("hello <b>world!!!</b>");
        });
</script>
</head>
<body>
        <p>aa</p>
</body>

结果：

解析： 显示的内容把标签当作内容显示出来。

　　4.8　　val（）方法

  • val（）； 获取或设置被选元素的值。

    元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

<script type="text/javascript">
	$(function(){
		$(‘:button‘).click(function(){
			var userName=$(‘.userName‘).val();
			alert(userName);
		});
	});
</script>
</head>
<body>
		<form name="f" >
			用户名:<input type="text" name="userName" class="userName"/><br/>
			密 码:<input type="password" name="passwd" /><br/>
			<input type="button" value="显示用户名" />
		</form>
</body>结果：

　　4.9 　　hover（）方法

  • $(‘label‘).hover( function(){$(this).css(‘color‘,‘red‘);} , function(){$(this).css(‘color‘,‘black‘);}
  • ps： 鼠标悬浮在label上 执行function(){$(this).css(‘color‘,‘red‘);
  • 鼠标离开label执行function(){$(this).css(‘color‘,‘black‘); （this不能加引号）
<script type="text/javascript">    $(function(){        $(‘font‘).hover(over,out);   //out和over不能加括号    });    function over(){        $(this).css("background-color","blue");   //这里用this表被鼠标覆盖的标签    }    function out(){        $(this).css("background-color","red");    }</script></head><body>        <font>鼠标移到这里会有惊喜哦~</font></body>结果：

　　5.0　　其他方法

  • height（）； 获取或设置指定节点的height值。
  • width（）； 获取或设置指定节点的width值。
  • css（）；
  • removeAttr（）； 移除某个节点的属性。
  • find（）;
  • hover(); //下面有讲
  • hide（）和show（）； 显示和隐藏节点

五、样式操作

  • $(‘div>p:first‘).addClass(‘select‘); 为div中的第一个p子节点添加一个class样式名为select的样式，ps：只能是class样式。

六、遍历节点

七、JQuery中的事件

　　7.1　　事件绑定

  • 方法：bind（）；

<script type="text/javascript">
	$(function(){
		$(‘button‘).bind("click",butClick);   //不能是butClick（）
	});
	function butClick(){
		alert("绑定事件");
	}
</script>
</head>
<body>
		<button>点击绑定事件</button>
</body>结果：

　　7.2　　事件解绑

八、JQueru中的动画

  • fadeIn([speed],[easing],[fn]):通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。参数：easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

    <script type="text/javascript">
    $(function(){
        $(‘#up‘).click(function(){
            //收图
            $(‘img‘).fadeOut(2000,up);
        });

        $(‘#down‘).click(function(){
            //放图
            $(‘img‘).fadeIn(2000,down);
        });
    });

    function up(){
        alert("收起成功");
    }
    function down(){
        alert("放下成功");
    }
</script>
</head>
<body>
        <img  src="./imags/abcd.png">
        <button id="up">点我收起图片</button>
        <button id="down">点我放下图片</button>
</body>结果：

    


    

    解析： fadeIn（）用法与fadeOut（）差不多，只是fadeIn（5000，show） 效果是在5秒内北京图片从空白到出现，在调用函数。
    • 







    

  • slideDown（）：slideDown([speed],[easing],[fn]) 用法与fadeOut、fadeIn（）差不多，效果不一样而已。
    • 




<script type="text/javascript">
	$(function(){
		$(‘#up‘).click(function(){
			$(‘p‘).slideUp("normal",up);
		});

		$(‘#down‘).click(function(){
			$(‘p‘).slideDown("normal",down);
		});

	});
	function up(){
		alert("收起成功");
	}
	function down(){
		alert("放下成功");
	}
</script>
</head>
<body>
		<p>我是一段可收缩的文字</p>
		<button id="up">点我收起</button>
		<button id="down">点我放下</button>
</body>结果：






				


				
时间： 2024-08-08 22:09:52 

		


		


	

	
	

		


		
（十） Jquery的基本使用的相关文章


						

		

			

                十.jQuery源码分析之.map()
			

		

		

									

				今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. http://read.qidia			

		

	

				

		

			

                如何创建一个基本JQuery的插件
			

		

		

									

				如何创建一个基本的插件 有时您希望在整个代码中提供一些功能.例如,也许你想要一个单一的方法,你可以调用一个jQuery选择,对选择执行一系列的操作.在这种情况下,您可能需要编写一个插件. 链接jQuery如何工作101:jQuery对象方法 在我们编写自己的插件之前,首先要了解一下jQuery如何工作.看看这段代码: 1 $( "a" ).css( "color", "red" ); 这是一些很基础的jQuery代码,但你知道幕后发生了什么吗?无			

		

	

				

		

			

                Web前端经典面试试题（三）
			

		

		

									

				一. 什么是Ajax??? 术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验. Ajax它是"Asynchronous JavaScript + XML的简写" 定义Ajax: Ajax不是一种技术.实际上,它由几种蓬勃发展的技术以新的强大方式组合而成.Ajax包含: * 基于XHTML和CSS标准的表示: * 使用Document Object Model进行动态显示和交互: * 使用XMLHttpRequest与服务器进行异步通信: * 使用JavaScri			

		

	

				

		

			

                简单十招提高jQuery执行效率
			

		

		

									

				1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的jQuery选择语句: $('.elem') $('.elem', context) context.find('.elem') 我们用1.4.2.1.4.4.1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次.结果如下: 可以看到,1.6.2版本的运行次数,远远超过两个老版本.尤			

		

	

				

		

			

                十四.jQuery解析之浏览器嗅探
			

		

		

									

				Chrome和Safrai使用的是webkit作为内核引擎,因此如果 jQuery.browser.webkit为true,则表示浏览器是chrome或safari; 如果jQuery.browser.mozilla为true,则表示浏览器是MozillaFirefox(火狐); jQuery.browser通过解析navigator.userAgent来获取浏览器类型和版本号,这种技术也称为浏览器的嗅探技术. navigator是全局对象window的属性,指向一个Navigator对象,包含			

		

	

				

		

			

                分享十二个有用的jQuery代码
			

		

		

									

				分享7个有用的jQuery代码 这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接.设置等高的列.jQuery预加载图像.禁用鼠标右键.设定计时器等实用代码片段,需要的朋友可以参考下 jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打			

		

	

				

		

			

                从零开始学习jQuery (十) jQueryUI常用功能实战
			

		

		

									

				原文:从零开始学习jQuery (十) jQueryUI常用功能实战 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始			

		

	

				

		

			

                十五.jQuery源码解析之Sizzle总体结构.htm
			

		

		

									

				Sizzle是一款纯javascript实现的css选择器引擎,它具有完全独立,无库依赖;小;易于扩展和兼容性好等特点. W3C Selectors API规范定义了方法querySelector()和querySelectorAll(),但是IE6,7不支持这两个方法. 在Sizzele内部,如果浏览器支持方法querySelectorAll(),则调用该方法查找元素,如果不支持,则模拟该方法的行为. Sizzle支持几乎所有的css3选择器,并且会按照文档位置返回结果. 上面截取的只是Siz			

		

	

				

		

			

                十六.jQuery源码解析之Sizzle设计思路.htm
			

		

		

									

				为了便于后面的叙述,需要了解一些相关术语和约定. 并列选择器表达式:"div,p,a"====>div,p,a是并列的. 块表达式:"div>p"中的div和p就是两个块. 块表达式的类型:共8种.id,class,name,attr,tag,child,pos,pseudo(伪类表达式) 块间的关系符:共4种.">":父子关系,"+":紧挨着的兄弟关系,"~":后面的所有兄弟关系,&qu			

		

	

				

		

			

                十分钟玩转 jQuery、实例大全(参考自博主索宁)
			

		

		

									

				十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $(&q