jQuery基础知识

最新推荐文章于 2023-05-31 08:33:36 发布

小崔崔的博客

最新推荐文章于 2023-05-31 08:33:36 发布

阅读量523

点赞数

分类专栏： JQuery 文章标签： jQuery基础知识

本文链接：https://blog.csdn.net/qq_39430589/article/details/77359521

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.jQuery基础知识

1.1基本概念：

jQuery是一个js库，能够帮助我们轻松实现一些原本可能比较麻烦的功能

jQuery每一个版本又有两个小版本，压缩版和未压缩版，压缩版文件较小，但是没有排版和注释，所以不便于阅读；而为压缩版文件较大，有排版和注释，便于阅读

JQuery实际上就是一个就是文件，加载到页面就可以直接使用了

也可以使用CDN（content Distribute Network）来引用JQuery

菜鸟网

百度

使用CDN的好处

（1）省事

（2）速度更快

1.2语法

$（选择器）.action()

$:定义了这是一个jQuery的代码

选择器：按照一定的规则选择DOM元素，非常类似css选择器

action；对选中元素执行的操作

案例：单击哪一段哪一段就变红色

方案一：

<body>

<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<p id="p3">这是第三个段落</p>
<p id="p4">这是第四个段落</p>
</body>
<script>
  /* var paras =document.getElementsByTagName("p");
    for(var i in paras){
        paras[i].addEventListener("click",red);
    }
    function red(){
        this.style.color ="red"
    }*/
    $("p").click(red);
  function red(){
      this.style.color = "red"
  }

-->
<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<p id="p3">这是第三个段落</p>
<p id="p4">这是第四个段落</p>
</body>
<script>
  var paras =document.getElementsByTagName("p");
    for(var i in paras){
        paras[i].addEventListener("click",red);
    }
    function red(){
        this.style.color ="red"
    }
</script>

方案二

<body>

<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<p id="p3">这是第三个段落</p>
<p id="p4">这是第四个段落</p>
</body>
<script>
    $("p").click(red);
  function red(){
      this.style.color = "red"
  }

JQuery的一行代码

$("p").click(red);

相当于js的若干行代码

var paras =document.getElementsByTagName("p");
  for(var i in paras){
      paras[i].addEventListener("click",red);
  }

所以说JQuery极大简化了程序员的工作

1.3选择器

（1）元素选择器

根据标签名来获取元素，比如

$(“P”):表示获取的所有段落

（2）id选择器

$(“#p”)：表示选择id=“p1”的元素

（3）class选择器

$(“.top2”)：表示选择class=“top2”的元素

（4）后代选择器

$(“div p”)：表示选择div里面的段落

（5）

$(“p:first”)：表示选择p标签的第一个元素，相当于css中的伪类选择器

（6）属性选择器

$(“p:[name]”)：表示选中具有name属性的段落

$("p[name=‘second’]")：表示选中所有name=“second”的段落

$("tr:even")：表示选中所有的奇数行的tr

1.4事件

JQuery中注册事件的方法也是调用JQuery对象的方法，

比如单击事件

$(“#div1”).click()；

鼠标移入事件

$(“#div1”).mouseenter()；

而且方法名就是JS中的事件名

之前，我们所有的js代码是放在<body>后面的，如果放在<body>之前呢？

实验证明，如果放在body之前，在获取元素时的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素都还不存在。

那怎么解决呢？

将代码放在$(document).ready(function){.....})中，也就是在文档加载完成之后去执行代码

</script>

小崔崔的博客

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础知识

1.jQuery基础知识1.1基本概念：jQuery是一个js库，能够帮助我们轻松实现一些原本可能比较麻烦的功能jQuery每一个版本又有两个小版本，压缩版和未压缩版，压缩版文件较小，但是没有排版和注释，所以不便于阅读；而为压缩版文件较大，有排版和注释，便于阅读JQuery实际上就是一个就是文件，加载到页面就可以直接使用了src="jquery-3.2.1.js">也可
复制链接

扫一扫

专栏目录