Java学习笔记-Day51 JQuery(二)、Bootstrap

发布时间:2023-05-08 16:30

Java学习笔记-Day51 JQuery(二)、Bootstrap

  • 一、JQuery
    • 1、设置属性
      • 1.1、 attr() 方法
      • 1.2、 prop() 方法
    • 2、显示和隐藏
      • 2.1、hide方法 和 show方法
      • 2.2、toggle方法
      • 2.3、fadeToggle方法
      • 2.4、slideToggle方法
    • 3、添加元素
    • 4、删除元素
    • 5、事件
      • 5.1、事件方法
      • 5.2、事件绑定
        • 5.2.1、click方法
        • 5.2.2、bind方法
        • 5.2.3、on方法
    • 6、获取父级别
    • 7、获取子级别
  • 二、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方法:返回被选元素的所有祖先元素,它一路向上直到文档的根元素

	$(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/

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号