jQuery的学习（一）

最新推荐文章于 2024-05-05 23:51:11 发布

w.w..

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量100

点赞数

分类专栏：学习文章标签： jQuery学习

本文链接：https://blog.csdn.net/guagu_/article/details/103045355

版权

学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本概况

jQuery是JavaScript的函数库，使用人数多。对于网页开发者来说，学会jQuery是必要的，因为它可以使人们更加了解网页设计。
jQuery的安装多种多样，可以从网页上添加jQuery库，也可以从官网jquery.com下载jQuery，亦或是通过CDN引用。在写代码时可以通过HTML来引用

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

（具体教程可以看菜鸟教程）

jQuery的使用

jQuery的使用一般是美元符号定义 jQuery，是将一个选择表达式，放进构造函数jQuery()，然后得到想要的元素。
如下列代码所示，就是点击按钮后，将所有p标签的代码隐藏，$（“p”）是选择所有p标签。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

还可以选择id，jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素；还可以是class选择器，$(".test")就是选择class为test的元素。
另外，选择表达式可以是css选择器，如：

$(document)//选择整个文档对象
$('div.myClass')//选择class为myClass的div元素

jQuery还有一些特殊的表达式，如

$('a:first')//选择网页中第一个a元素
$('#myForm :input')//选择表单中的input元素

等等。
jQuery常用的事件有click()，mouseleave()、mouseenter()，经常用来实现动画的实现。在使用时，常常用自定义的函数来操作它。

<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>

这段代码就是在鼠标移动到p标签的字体时，会弹框出alert里边的内容，通过函数来实现。通过这些动画可以实现一些不同的功能。
jQuery可以将多个操作写在一起，形成链式操作，

$('div').find('h3').eq(2).html('Hello');  
等价于
1 $('div')//找到div元素  
2 .find('h3')//选择其中的h3元素  
3 .eq(2)//选择第3个h3元素  
4 .html('Hello'); //将它的内容改为Hello

其中jQuery还提供了.end()的返回方法，可以回到上一步。
jQuary还能进行DOM操作，主要有三种：

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

$("#tex").click(function(){
    alert("Text: " + $("#test").text());
  });
  
  <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="tex">显示文本</button>

这段代码就会将p标签中的文字弹框显示并将忽略HTML代码的格式

w.w..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery的学习（一）

基本概况jQuary是JavaScript的函数库，使用人数多。对于网页开发者来说，学会jQuery是必要的，因为它可以使人们更加了解网页设计。jQuary的安装多种多样，可以从网页上添加jQuary库，也可以从官网jquery.com下载jQuary，亦或是通过CDN引用。在写代码时可以通过HTML来引用<head><script src="jquery-1.10.2....
复制链接

扫一扫