欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

W3Cschool编程实战JQuery知识点总结

程序员文章站 2022-03-30 09:50:05
1、初识JQuery现在让我们开始学习最流行的JavaScript框架jQuery吧。至于JavaScript,不用担心,我们很快就会涉及到它。在我们开始学习使用jQuery之前,需要在HTML文件中添加一些代码。首先,在页面顶部添加一行script元素,然后在下一行写上结束符。浏览器会运行script里所有的Javascript,包括jQuery。在你的script元素里,添加这段代码:`$(document).ready(function() {到你的script中,然后在下一行用});`...

1、初识JQuery

现在让我们开始学习最流行的JavaScript框架jQuery吧。至于JavaScript,不用担心,我们很快就会涉及到它。

在我们开始学习使用jQuery之前,需要在HTML文件中添加一些代码。

首先,在页面顶部添加一行script元素,然后在下一行写上结束符。

浏览器会运行script里所有的Javascript,包括jQuery。

在你的script元素里,添加这段代码:

`$(document).ready(function()
 {到你的script中,然后在下一行用});`

接下来我们将学习如何写function,需要注意的是,function里面的代码会在浏览器加载页面后立即运行。

这很关键,因为在没有document ready function以前,你的代码可能会在HTML渲染完成之前就执行了,这样会产生bug。

<script>
	$(document).ready(function(){
  
  });
</script>

2、animated bounce

要让所有的button元素有弹回效果,只要把这段代码写在document ready function里面就可以了:

$("button").addClass("animated bounce");

注意,我们已经在后台为你引入了jQuery库和Animate.css库,你可以在编辑器里直接使用这两个库,从而通过jQuery给button元素添加Animate.css的bounce回弹动画效果。

另外,请务必使用$("button").addClass("animated bounce");,而不是$(‘button’).addClass("animated bounce");,因为单引号选择器无法通过我们的测试。

你只需要用jQuery的.addClass()方法,就可以给元素加class了。

animated bounce
animated shake
animated fadeOut
animated hinge

3、你还可以根据id属性来获取元素。

首先,使用$("#target3")选择器来选择id为target3的button元素。

注意,就像CSS声明一样,在id的名称前加上一个#。

然后使用jQuery的.addClass()方法来添加animated和fadeOutclass。

以下是给id为target6的button元素添加fade out效果的代码:

$("#target6").addClass("animated fadeOut")

4、.addClass()

现在你已经了解了三种获取元素的方式:type选择器$("button")、class选择器$(".btn")、id选择器$("#target1")。

尽管只用.addClass()就可以添加不同的class,但我们还是来尝试用三种不同的方式给同一元素添加class吧。

使用.addClass()方法和上述三种jQuery选择器,分别给同一元素添加class:

给所有type为button的元素添加animatedclass。

给所有class为.btn的按钮添加shakeclass。

给所有id为#target1的按钮添加btn-primaryclass。

注意:

你应该每次只获取一个元素并只添加一个class。最终,三个选择器会分别将animated,shake和btn-primary三个class添加到#target1元素中

5、removeClass()方法删除元素的class

你可以通过jQuery的addClass()方法给元素添加class,同样的,也可以通过jQuery的removeClass()方法删除元素的class。

6、.css()改变元素的CSS样式

我们可以直接通过jQuery来改变HTML元素的CSS样式。

jQuery有一个叫做.css()的方法,能让你改变元素的CSS样式。

以下代码显示如何将颜色改变成蓝色:

$("#target1").css("color", "blue");

这跟一般的CSS语法有点不同,因为这里的CSS属性和值是在引号内的,并且用逗号分开,而不是冒号。

7、.prop()的方法以禁用属性按钮

你还可以用jQuery改变HTML元素的非CSS的属性。比如,你可以禁用按钮。

当你把按钮设置成禁用以后,按钮会变灰并且不能点击。

jQuery有一个.prop()的方法,可以让你来调整元素的属性。

以下代码显示如何禁用所有按钮:

$("button").prop("disabled", true);

来尝试只让target1按钮禁用。

8、使用Jquery改变元素中的文本

jQuery不仅可以改变HTML元素开始和结束标签之间的文本,还可以改变HTML元素标记本身。

jQuery有一个.html()方法,可以让你在元素中添加HTML标签和文字,而元素中之前的内容都会被方法中的内容所替换掉。

以下代码显示如何重写和强调标题文本(使用em标签):

$("h3").html("<em>jQuery Playground</em>");

jQuery 还有一个类似的方法叫.text(),它只能改变文本但不能添加标签。换句话说,这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。

强调id为target4按钮里的文本。

9、现在让我们用jQuery从页面中删除一个HTML元素。

jQuery 有一个.remove()的方法,可以彻底删除一个HTML元素。

使用.remove()方法来删除页面中的target4元素。

10、jQuery使用appendTo()移动HTML元素

现在让我们尝试把元素从一个div里移动到另外一个div里。

jQuery有一个appendTo()方法,可以让你把选中的HTML元素附加到其他元素中。

比如,我们想让target4从right-well移动到left-well,我们用以下代码:

$("#target4").appendTo("#left-well");

尝试把target2元素从left-well移动到right-well。

11、clone()方法复制元素

jQuery使用clone()方法复制元素 除了移动元素,你还可以将元素从一个地方复制到另一个地方。

jQuery有一个clone()方法,可以复制元素。

例如,如果我们想把target2从left-well复制到right-well,我们用以下代码:

$("#target2").clone().appendTo("#right-well");

你有没有注意到上面是将两个jQuery方法合在一起使用了?这种叫方法链function chaining,它是jQuery的一种便捷方式。

复制target5元素并将其附加到left-well。

12、jQuery使用parent()操作父级元素

每个HTML元素都有一个parent元素,并从中继承属性。

例如,你的jQuery Playground中的h3元素的父元素是<div class="container-fluid">,<div class="container-fluid">的父元素是body。

jQuery有一个parent()方法,可以允许你访问选定元素的父元素。
以下例子显示如何使用parent()设定left-well元素的父元素的背景色为蓝色:

$("#left-well").parent().css("background-color", "blue")

13、jQuery使用children()操作子级元素

许多HTML元素都有children(子元素),子元素从父元素那里继承属性。

例如,每个HTML元素都是body的子元素,你的jQuery Playground中的h3元素是<div class="container-fluid">的子元素。

jQuery有一个children()方法,可以让你访问选定元素的子元素。

以下例子显示如何使用children()方法设置left-well元素的子元素的文本颜色为蓝色:

$("#left-well").children().css("color", "blue")

14、jQuery使用target:nth-child(n) CSS选择器获取子元素

你已经看到了用jQuery选择器通过id属性来获取元素的是非常方便的,但你不可能总是写这么整齐的id。

幸运的是,jQuery有一些另外的技巧来获取正确的元素。

jQuery用CSS选择器来获取元素,target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素。

以下代码显示如何给jQuery Playground中的每个井中(left well和right well)的第三个子元素添加bounce类:

$(".target:nth-child(3)").addClass("animated bounce");

15、jQuery使用选择器操作偶数索引元素

以下代码显示如何通过targetclass获取所有奇数元素,并给它们添加class:

$(".target:odd").addClass("animated shake");

注意,jQuery里的索引是从0开始的,也就意味着会与直觉相反:
:odd选择的是第2、4、6……个元素,因为索引是1、3、5……。
:even选择的是第1、3、5……个元素,因为索引是2、4、6……。

本文地址:https://blog.csdn.net/weixin_42103983/article/details/107143997