jQuery简单基础介绍

Posted 2021-04-08 喜乐喵

想法丨发现丨习惯丨编程

让学习成为习惯，让灵魂拥有温度

老湿！学习jQuery难吗？

要学习多长时间呀？

Jquery是用javascript写出来很多的功能模块集合，要是会javascript来学他就很方便，有心的话还能直接看懂他的功能代码，就算是别人已经帮你用javascript写了很多的工作，天赋很重要 乌拉拉  理论在充分 不如到项目中去摸爬打滚 那样会更快，javascript只是基本语言，jquery就是javasript实现的一些功能  相当于 java语言和 spring struts等框架的区别，如果你会了js再学jq.很容易而且你会喜欢上它，时间一周就可以 。

埃达斯丶

我们来学习下jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

1. 美元符号定义 jQuery

2. 选择符（selector）"查询"和"查找" html 元素

3. jQuery 的 action() 执行对元素的操作

例子：

1. $(this).hide() - 隐藏当前元素

2. $("p").hide() - 隐藏所有 <p> 元素

3. $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

4. $("#test").hide() - 隐藏所有 id="test" 的元素

jQuery中的document ready函数：

$(document).ready(function(){    

// 在这里写 jQuery 代码... 

 });

简洁写法（与上面写法不同）：

$(function(){ 

   // 在这里写 jQuery 代码...

 });

jQuery的显示与隐藏。

通过 jQuery，你可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

代码：

$("#hide").click(function(){

  $("p").hide();

}); 

 $("#show").click(function(){

  $("p").show();

});

jQuery - 添加元素。

我们将学习用于添加新内容的四个jQuery 方法：

1. append() - 在被选元素的结尾插入内容

2. prepend() - 在被选元素的开头插入内容

3. after() - 在被选元素之后插入内容

4. before() - 在被选元素之前插入内容

append() 方法：

$("p").append("追加文本");

prepend() 方法：

$("p").prepend("在开头追加文本");

after() 方法：

$("img").after("在后面添加文本");

before() 方法：

$("img").before("在前面添加文本");

jQuery 滑动方法slideDown()。

jQuery slideDown() 方法用于向下滑动元素。

语法：$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

实例代码：

$("#flip").click(function(){

  $("#panel").slideDown();

});

jQuery 滑动方法slideUp() 。

jQuery slideUp() 方法用于向上滑动元素。

语法：$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

实例代码：

$("#flip").click(function(){

  $("#panel").slideUp();

});

好啦！本期的jQuery基础介绍就到这里啦！谢谢各位的阅读！我们下期再见！