JQ入门实验课展示

九川melody

已于 2023-05-23 10:33:37 修改

阅读量116

点赞数

文章标签： javascript ajax 前端

于 2023-05-16 17:01:10 首次发布

本文链接：https://blog.csdn.net/weixin_74252986/article/details/130707442

版权

本质:js库，有插件

功能:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

使用：下载JQ或者通过CDN引用

与CSS相同，建议将JQ函数放到一个单独的文件中，然后通过url引用，易于维护代码

<head>
<script src='url'></script>

语法:

1.基本逻辑:query→action

2.基础语法:$(selector).action()

$定义符号，selector选择器，参考CSS选择器

3.JQ函数位于一个document ready函数中目的是使文档加载完全之后再执行JQ函数

以下两种写法相同

$(document).ready(function(){
//JQ代码

});

$(function(){
});

4.JQ选择器

①以$开头，即$("")

②包括CSS选择器(元素选择器，ID选择器，.class选择器，属性选择器)，以及JQ自定义的选择器

5.JQ事件

①常见的dom事件

②语法

$(“p”).click();
//使用元素选择器，点击事件


$(“P”).click(function(){
//点击动作之后执行的的代码
})；

③常见的JQ事件方法

$("p").click(function(){
$(this).hide()});
//点击后调用函数


//事件后调用多个函数
//hover()方法用于模拟光标悬停事件。

//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

④回调函数

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

例子演示了带有 speed 参数的 hide() 方法，并使用回调函数

⑤JQ效果

各种方法

fadeIn,fadeOut,fadeToggle,fadeTo

注意方法的大小写一定要写正确，不然失效

九川melody

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQ入门实验课展示

②包括CSS选择器(元素选择器，ID选择器，.class选择器，属性选择器)，以及JQ自定义的选择器。3.JQ函数位于一个document ready函数中目的是使文档加载完全之后再执行JQ函数。与CSS相同，建议将JQ函数放到一个单独的文件中，然后通过url引用，易于维护代码。例子演示了带有 speed 参数的 hide() 方法，并使用回调函数。2.基础语法:$(selector).action()$定义符号，selector选择器，参考CSS选择器。①以$开头，即$("")③常见的JQ事件方法。
复制链接

扫一扫