jQuery 学习笔记

文章目录

  • 简介
    • 安装jQuery
      • 下载
      • CDN
    • jQuery 语法
      • 基础语法是:$(selector).action()
      • window.onload和$(document).ready()
    • jQuery 选择器
      • jQuery 元素选择器
      • jQuery 属性选择器
      • jQuery CSS选择器
    • jQuery 事件
      • $名称冲突
  • jQuery 效果
    • 隐藏/显示
      • hide()和show()
      • toggle()
    • 淡入淡出
    • 滑动
      • 比较显示/隐藏、fading、滑动
    • 动画
      • animate()语法
      • 操作多个属性
      • 使用相对值
      • 使用预定义的值
      • 动画队列功能
      • 不同选择内容
    • stop()
    • Channing
  • jQuery HTML
    • 获取和设置内容
    • 获取和设置属性
    • 添加新的HTML内容
      • 添加单个
      • 添加若干个
    • 删除
    • CSS 类
    • 尺寸
  • 遍历
    • 祖先(向上遍历)
      • parent()
      • parents()
      • parentsUntil()
    • 后代(向下遍历)
      • children()
      • find(params)
    • 兄弟(水平遍历)
    • 过滤
  • 参考:

简介

安装jQuery

下载

官网 jquery.com

CDN

百度

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

jQuery 语法

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

window.onload和$(document).ready()

由于脚本由上到下解释,如果script在元素前面,则需要使用onload或者ready,告诉引擎在页面加载完成后才运行script内容。

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。

原生JavaScript:

<script type="text/javascript">
		window.onload = function() {
			var vanish = document.getElementsByTagName("p");
			var oBtn = document.getElementsByTagName("button");
		
			oBtn[0].onclick = function() {
				var length = vanish.length;
				for (var i = 0; i < length; ++ i) {
					vanish[i].innerHTML = "";
				}
			}
		}
</script>

使用jQuery(更加方便简洁):

<script type="text/javascript">
		$(document).ready(function() {
			$("button").click(function() {
				$("p, h2").hide();
			});
		});
</script>

这里的body:

	<h2 class="test">This is a headingh2>
	<p class="test">This is a paragraph.p>
	<p>This is another paragraph.p>
	<button id="f" type="button">Click mebutton>

注意: 如果没有使用onload或者ready,会使得script执行过早,出现操作错误。

test3.html:19 Uncaught TypeError: Cannot set property 'onclick' of undefined
    at test3.html:19

补充:

jQuery入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别

  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

jQuery 选择器

jQuery 元素选择器

jQuery 使用CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=“intro” 的

元素。

$(“p#demo”) 选取所有 id=“demo” 的

元素。

jQuery 属性选择器

jQuery 使用XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。

$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。

$("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

jQuery CSS选择器

使用原生JavaScript改变内联样式:

	var temp = document.getElementsByTagName('p');
	temp[0].style.cssText = "background: red;";

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

	$("p").css("background-color", "red");

注意: 属性名可加""可不加,要使用驼峰法如下:

	$("p").css(bakcgroundColor, "red");

jQuery 事件

$名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

	$.noConflict();
	jQuery(document).ready(function(){
  	jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
  });
});
	$.noConflict();
	var sb = jQuery.noConflict();
	sb(document).ready(function() {
			// $("button").click(function() {
			// 	$("p, h2").hide();
			// });
			sb("button")[0].onclick = function() {
				sb("p").css("color", "red");
				var temp = document.getElementsByTagName('p');
				temp[0].style.cssText = "background: red;";
				sb("p:not(.test)").css("color", "blue");
			}
	});

jQuery 效果

隐藏/显示

hide()和show()

$(selector).hide(speed,callback); $(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。(注意加"")

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


例子

对于body:

	<h3>中国h3>
	<button class="show">显示button>
	<div class="outer">
		<button class="hide">隐藏button>
		<p>联系人: 张先生 <br /> 
		北三环中路100号 <br /> 
		北京p>
	div>

	<h3>美国h3>
	<div class="outer">
		<button class="hide">隐藏button>
		<p>联系人: 张先生 <br /> 
		北三环中路100号 <br /> 
		北京p>
	div>

script:

		$(document).ready(function() {
			$("button.hide").click(function() {
				$(this).parent(".outer").hide(1000, showB());
			});
		});

		function showB() {
			$("button.show").click(function(){
				$("button.show+div").show(1000);
			});
		}

可以看出,要实现显示隐藏之后的元素,隐藏已显示的元素,只靠hide()和show()十分的不方便。

于是就有了toggle().

toggle()

来回切换hide()和show(),通过一个按钮,显示被隐藏的元素,隐藏已显示的元素。

$("button").click(function(){
  $("p").toggle();
});

语法:
$(selector).toggle(speed,callback);

淡入淡出

  • fadeIn() 显示被隐藏的元素(display: none)
  • fadeOut()
  • fadeToggle()
  • fadeTo()

语法:
$(selector).fadeIn/Out/Toggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

hide和show其实是对display进行设置,fading方法中的in和out和hide/show可以混用。

不过 某些效果不一样。

滑动

  • slideDown()
  • slideUp()
  • slideToggle()

比较显示/隐藏、fading、滑动

toggle():

fadeToggle():

slideToggle():

动画

animate()语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

例子

	$("button").click(function(){
 	$("div").animate({left:'250px'});
}); 

注意属性名字使用驼峰命名法,属性值用""括起来。如:marginTop: ‘100px’。

操作多个属性

操作多个属性可用逗号分开:

	$("button").click(function(){
  		$("div").animate({
	    	left:'250px',
	    	opacity:'0.5',
	    	height:'150px',
	    	width:'150px'
  		});
	}); 

使用相对值

可以定义相对当前元素的值:

		$(document).ready(function() {
			$("button").click(function() {
				$("p").animate({left: "+=300px"}, "slow");
				$("p").animate({fontSize: "+=20px"}, "slow");
			});
		});

使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){
	  $("div").animate({
	  		height:'toggle'
	  });
});

动画队列功能

对同一个选择内容进行前后顺序的动画。

多个animate()调用,jQuery会创建包含这些调用的“内部”队列,逐一运行,有先后顺序

		$(document).ready(function() {
			$("button").click(function() {
				$("p").animate({left: "+=300px"}, "slow");
				$("p").animate({fontSize: "+=20px"}, "slow");
			});
		});

如上为:先向右平移300px,然后字体变大20px。

可先把选择器赋值到变量,便于操作:

	var pp = $("p");
	$("p").animate({left: "+=300px"}, "slow");
	$("p").animate({fontSize: "+=20px"}, "slow");

不同选择内容

如果对不同的选择内容添加多个动画animate(),则他们是同时进行的,而不是依次进行。

stop()

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,不带参数时,stop() 会清除在被选元素上指定的当前动画,意思是:清楚当前动画队列上的第一个动画。

注意动画队列的概念思想

Channing

jQuery允许在一条语句把多个方法链接起来(在相同元素上)。

做法:直接连在后面添加即可,执行有先后顺序

例子:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

或者

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery HTML

获取和设置内容

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

无参数时返回相应的值,有参数时设置内容:

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

获取和设置属性

  • attr()

获取属性值:

$("#test1").attr("href")

设置属性值:

$("#test1").attr("href", "https://shaohuahua.top")

设置多个属性值:

$("#test1").attr({
	"href": "https://shaohuahua.top",
	"title": "test"
});

注意: animate()css()中的属性名用""括起来时使用的是样式表中的名字,如果不用"",则用驼峰法命名。attr()中的属性名必须用""括起来。

添加新的HTML内容

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

添加单个

例子:

$("p").prepend("Some prepended text.");
$("ol").prepend("
  • Prepended item
  • "
    ); $("p").prepend("Prepended text. ");

    其他三种方法相类似,这里都是使用text/HTML的方式创建新元素。""内的内容相当于直接写在HTML中

    添加若干个

    实际上,这四种方法可以通过参数接收无限数量的新元素。新元素可以通过

    1. text/HTML
    2. jQuery
    3. JavaScript/DOM
      三种方式创建。

    例子:

    function appendText()
    {
    var txt1="

    Text.

    "
    ; // 以 HTML 创建新元素 var txt2=$("

    "
    ).text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }

    删除

    • remove() 删除被选元素及其子元素
    • empty() 删除被选元素的子元素——清空
    • remove(“params”) 可接收一个参数,参数可为任何jQuery选择器的语法,删除满足条件的元素——过滤

    CSS 类

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    例子:

    $("button").click(function(){
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });
    

    可以通过预先设置CSS样式,然后用jQuery添加到元素中。

    尺寸

    • width() 设置/返回元素宽度(不包括内边距、边框和外边距)
    • height() 设置/返回元素高度(不包括内边距、边框和外边距)
    • innerWidth() 设置/返回元素宽度(不包括边框和外边距)
    • innerHeight() 设置/返回元素高度(不包括边框和外边距)
    • outerWidth() 返回元素的宽度(包括内边距和边框)
    • outerHeight() 返回元素的高度(包括内边距和边框)

    outerWidth(true)和outerHeight(true) 返回包括内边距、边框和外边距。

    设置时参数使用数字即可:

    $("button").click(function(){
      $("#div1").width(500).height(500);
    });
    

    遍历

    通过遍历方法可以选取任何HTML元素

    祖先(向上遍历)

    通过jQuery,可以很方便的向上遍历DOM树,查找元素的祖先

    parent()

    返回直接父元素

    例子:

    	$(function() {
    			var x = $("span").parent();
    			x.css({
    				color: "red",
    				border: "2px solid red"
    			});
    	});
    

    parents()

    返回所有祖先元素。

    可以添加参数,返回指定元素的祖先元素。

    参数是CSS选择器,十分灵活。

    例子:

    	$(function() {
    			var x = $("span").parents("div");
    			x.css({
    				color: "red",
    				border: "2px solid red"
    			});
    	});
    

    parentsUntil()

    给定参数,返回两个给定元素之间的祖先元素。

    例子:

    	$(function() {
    			var x = $("span").parentsUntil("div");
    			x.css({
    				color: "red",
    				border: "2px solid red"
    			});
    	});
    

    后代(向下遍历)

    children()

    children() 方法返回被选元素的所有直接子元素

    该方法只会向下一级对 DOM 树进行遍历。

    可以使用参数过滤对子元素的搜索。

    例子:

    	$(function() {
    			var x = $("div").parents("p.test");
    			x.css({
    				color: "red",
    				border: "2px solid red"
    			});
    	});
    

    find(params)

    find() 方法返回被选元素的后代元素,一路向下直到最后一个后代,即所有选定的子孙

    注意: find(params)必须要有参数

    $(document).ready(function(){
      $("div").find("span");
    });
    

    如要返回所有子孙,使用选择器*

    $(document).ready(function(){
      $("div").find("*");
    });
    

    兄弟(水平遍历)

    1. siblings()
      返回被选元素的所有兄弟元素。

      $(document).ready(function(){
        $("h2").siblings();
      });
      

      可以使用参数过滤。

      $(document).ready(function(){
        $("h2").siblings("p");
      });
      
    2. next()
      返回被选元素之后的一个兄弟元素。

      **注意:**不可以使用参数过滤。

      nextAll()
      返回被选元素之后的所有兄弟元素。

      **注意:**不可以使用参数过滤。

      nextUntil()
      返回被选元素和指定元素之间的兄弟元素。

      prev()
      prevAll()
      prevUntil()
      以上三种方法和next相类似,只是方向相反。

    过滤

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

    • first() 返回被选元素的首个元素
    • last() 返回被选元素的最后一个元素
    • eq(n) 返回指定索引号的元素,n从0开始
    • filter() 返回符合要求的元素
    • not() 返回不匹配标准的所有元素,与filter()相反

    参考:

    jQuery W3school

    你可能感兴趣的:(jQuery)