Java学习笔记-Day51 JQuery（二）、Bootstrap

 
 

一、JQuery

 

1、设置属性

 

1.1、 attr() 方法

 
attr() 方法用于设置和改变属性值。

	//改变（设置）链接中 href 属性的值
	$("button").click(function(){
    
    
	  $("soso").attr("href","https://www.baidu.com");
	});

attr() 方法也允许同时设置多个属性。

	$("button").click(function() {
    
    
		//同时设置 href 和 title 属性
		$("#soso").attr({
    
    
			"href": "http://www.baidu.com",
			"title": "百度"
		});
	});

注意：虽然使用attr方法可以设置对象的属性，但是并非所有的对象都可以通过attr方法来完成。例如：checked则不能使用attr方法，要用prop方法。
 

1.2、 prop() 方法

 
prop() 方法设置或返回被选元素的属性和值。

（1）设置属性的值：用于设置属性的值时，则为匹配元素集合设置一个或多个属性。

	$("Checkbox").prop("checked",$("Checkbox").prop("checked"));

（2）获取属性的值：用于返回属性的值时，则返回第一个匹配元素的属性的值。

	console.log($("Checkbox").prop("checked"));

 

2、显示和隐藏

 

2.1、hide方法 和 show方法

 
通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

hide方法的语法：$(selector).hide(speed,callback);

• 可选的 speed 参数规定隐藏的速度，可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是隐藏完成后所执行的函数名称。

	$("#hide").click(function(){
    
    
	  $("p").hide();
	});

show方法的语法：$(selector).show(speed,callback);

• 可选的 speed 参数规定显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是显示完成后所执行的函数名称。

	$("#show").click(function(){
    
    
	  $("p").show();
	});

 

2.2、toggle方法

 
通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。调用一次显示被隐藏的元素，再调用一次隐藏已显示的元素，如此循环反复。

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

 

2.3、fadeToggle方法

 
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：$(selector).fadeToggle(speed,callback);

• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是 fading 完成后所执行的函数名称。

	$("#btn").click(function(){
    
    
	  $("#div1").fadeToggle();
	  $("#div2").fadeToggle("slow");
	  $("#div3").fadeToggle(3000);
	});

 

2.4、slideToggle方法

 
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

语法：$(selector).slideToggle(speed,callback);

• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是滑动完成后所执行的函数名称。

	$("#flip").click(function(){
    
    
	  $("#panel").slideToggle();
	});

链接css方法、slideUp方法和slideDown方法：

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

3、添加元素

 
（1）append()：在被选元素的结尾插入内容(内部)。

	$("p").append("appended text");

 
（2）prepend()：在被选元素的开头插入内容(内部)。

	$("p").prepend("prepended text");

 
（3）after()：在被选元素之后插入内容(外部)。

	$("img").after("after text");

 
（4）before()：在被选元素之前插入内容(外部)。

	$("img").before("before text");

 

4、删除元素

 
（1）remove()：删除被选元素及其子元素。

	$("#div1").remove();

 
（2）empty()：从被选元素中删除子元素。

	$("#div1").empty();

 

5、事件

 
JavaScript中事件语法： document.getElementById(“xxx”).onclick=function(){ 代码 };

JQuery中事件语法：$(“xxx”).click(function(){ 代码 });
 

5.1、事件方法

 
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

（1）ready方法：$(document).ready(function)，在文档加载后激活函数。

（2）click方法：$(selector).click(function)，当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

（3）dblclick方法：$(selector).dblclick(function)，双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

（4）dblclick方法：$(selector).focus(function)，当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

（5）dblclick方法：$(selector).mousemove(function)，当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
 

5.2、事件绑定

 
click方法 ：只绑定了一个事件(普通DOM元素)。例如 $("#btn").click();

bind方法：可以绑定多个事件。

on方法：用于动态事件的绑定。
 

5.2.1、click方法

 
click方法：当点击元素时，会发生 click 事件。

语法：$(selector).click(function)

参数	描述
function	可选。规定当发生 click 事件时运行的函数。

	$("#btn").click(function(){
    
    
	  console.log("按钮点击");
	});

 

5.2.2、bind方法

 
bind方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。bind方法将事件和函数绑定到元素。

语法：$(selector).bind(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

  $("#btn").bind("click",function(){
    
    
    console.log("按钮点击");
  });

 

5.2.3、on方法

 
原始的事件绑定方法对 JavaScript 动态生成的元素是无效的。例如，在按钮事件中，原始的click方法对动态拼接出来的按钮时是无效的，这种情况下的动态按钮，就只能使用on方法来进行触发，其他的都会无效。

语法：$(document).on(事件,选择器,function(){ 代码 });

	$(document).on("click","#btn",function () {
    
    
		console.log("按钮点击");
	});

 

6、获取父级别

 
（1）parent方法：返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

	$(document).ready(function(){
    
      
	  console.log($("li").parent());
	});

（2）parents方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 <html>。

	$(document).ready(function(){
    
      
	  console.log($("li").parents());
	});

 

7、获取子级别

 
children方法：返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

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

 

二、Bootstrap

 
Bootstrap 是 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

全局 CSS 样式：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果，还有先进的栅格系统。

组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

JavaScript 插件：JQuery 插件为 Bootstrap 的组件赋予了生命。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

Bootstrap官方文档中文版：https://v3.bootcss.com/getting-started/