jQuery基础

最新推荐文章于 2022-11-15 10:08:40 发布

巧克力很苦

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量140

点赞数

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

本文链接：https://blog.csdn.net/qq_44607694/article/details/88927647

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

什么是jQuery

是javascript的一个“库”。直白的说就是用javascript这门编程语言写好了很多功能。我们可以直接拿过来用。

在HTML文档中嵌入javascript代码
javascript代码应该写在body标签结束之前的script标签中

<body>
    <script>
         //这里写js代码
    </script>
</body>

在网页中输出 hello javascript

alert("hello javascript")

引用外部文件

<script src="jquery.js"></script>

树状结构的几种节点

标签是元素节点
文字是文本节点
属性是属性节点

jQuery作用

操作节点（元素节点、文本节点、属性节点）

改变样式

案例

  $(".box").css("background-color","blue");

//$(".box")里面的(“box”)是CSS选择器
//.css 是方法是CSS
//“background-color” 改变的属性
//"blue"改变的值用英文逗号隔开

不要写在引用jQuery里面的script里面因为写在里面不生效的

案例

  $(".click") .click(function(){
            $(".click").css("background-color","pink")
        }
      );

//click点击事件
//function可以把具体的方法写在里面

案例

   $(".this").click( function(){
            $(this).css("background-color","azure")
        }
      );

//this关键字点击那个变那个

改变元素的属性节点
其实就是把img里面的src值变成另一个src值

   $("#pic").click( function(){
            $("#pic").attr("src","1.jpg");
       }
      );

//("#pic")是img里面的id值名为pic
//.attr改变元素节点的属性
//(“src”,“1.jpg”)改变的图片路径和图片名字

改变文本节点

   $("#holl").click( function (){
          $(this).text ("javascript");
      }
     );

//改变文本节点

为了规范必须在在改变节点的后面加上;

用jQuery改变元素样式

CSS的思路是通过CSS选择器获取元素，然后通过CSS属性设置改变元素样式
jQuery的编写也是类似思路，首先通过jQuery选择器获取元素然后通过，jQuery方法操作元素
jQuery常用选择器如下
$("#id"):id选择器
$(".class"):类选择器
$(“h3”):元素选择器