JQUERY基础

Posted 0-lingdu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQUERY基础相关的知识，希望对你有一定的参考价值。

1，jquery能干什么？

jQuery库包含以下功能：

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

2，jquery是什么？

是一个库，用的时候直接导入就可以了。

<script src="jquery-1.10.2.min.js"></script>    //导入本地库，需要把jquery文件放在要用的目录下
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>    //导入云端的jquery也是可以的

3，基本语法

基础语法： $(selector).action()    //$选取html元素，action后加操作

实例：

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

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

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

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

注意有个事件比较特殊：文档就绪事件，意思是只有当整个html页面加载完了以后，才能进行jquery操作，否则就会分不清先后。出现错误。所以所有的代码最好封装在表示页面加载完成的函数中

$(document).ready(function(){    //first method
 
   // 开始写 jQuery 代码...
 
});


$(function(){    //second method
 
   // 开始写 jQuery 代码...
 
});

4,选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。当然还有自定义的方法，不过jQuery 中所有选择器都以美元符号开头：$()。

一起来试试吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"> </script>   //调用的是云端jquery库
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

//原本的纯html页面是上面这样的，但是我们加上jquery选择器以后（自己找地方加）
<script>
$(document).ready(function(){    //文档加载完成以后，我们开始执行下面的操作
  $("button").click(function(){    //选择器选中了按钮，只要点击按钮，就会把p元素的内容隐藏掉
    $("p").hide();
  });
});
</script>

选择器的种类：

1，元素选择器：这样：$("p").action()，    //$("p:first")选取第一个p元素；$(p.intro)选取 class 为 intro 的 <p> 元素

2,id选择器：$("#test").action();

3，class选择器：$(".test").action();

4，属性选择器：$("[href]")    //选取所有带有href属性的元素

5，type参数选择器：$(":button")    //选取所有type=‘button‘的元素

 

建议使用独立的jquery函数，然后在html里引用

<script src="my_jquery_functions.js"></script>    //导入像这样

5，事件

事件就是选择器后面的action，表示选完了要对那个元素干什么。

常用的事件：

 

标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave hover blur unload

click()

click() 方法是当按钮点击事件被触发时会调用一个函数

dblclick()

当双击元素时，会发生 dblclick 事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();    //点击哪个p元素，哪个就消失
  });
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>

mouseenter()，穿过

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()，离开

当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()，点击

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()，松开

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()，进去一个函数，出来一个函数

hover()方法用于模拟光标悬停事件。

<script>
$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
});
</script>
//注意俩function之间的连接方式

focus()事件

当元素获得焦点时，发生 focus 事件。意思是等用户想把信息输入到某个文本框，点击了这个文本框，这个文本框就变了背景颜色，表示当前属于选中状态

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

 



以上是关于JQUERY基础的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段