jQuery的基本操作1

目录

jQuery选择器

jQuery事件 

 鼠标事件

    表单事件

   文档/窗口事件

    键盘事件

事件语法格式

jQuery效果

显示/隐藏

淡入淡出

滑动

方法链接

​​​​​​​

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

下面是我总结的一些简单的jquery操作。

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。                                                  jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。                                        jQuery 中所有选择器都以美元符号开头：$()。

 这些选择器除了可以单独使用，还可以组合使用

基本的选择器就这些，想了解更多详细的选择器只能寄予自己去搜寻吧

jQuery事件 

页面对不同访问者的响应叫做事件。                                                                                               事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。                                                  实例：

• 在元素上移动鼠标。
• 选取单选按钮
• 点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"                  常见的事件

 鼠标事件

      click                       点击鼠标的主按钮  点击触控板
      dblclick                  双击鼠标的主要按钮
      mouseenter          当鼠标指针穿过元素时，会发生 mouseenter 事件
      mouseleave         当鼠标指针离开元素时，会发生 mouseleave 事件

    表单事件

      blur          元素失去焦点
      focus       元素获得焦点当                                                                                                          submit    提交表单时，会发生 submit 事件                                                                        change    当元素的值改变时发生 change 事件

   文档/窗口事件

       load
        在页面完全加载后会在window上触发这个事件
        如果是图像加载完成后 会在img元素上触发
        window.onload
      unload
        在页面完全卸载后会在window上触发这个事件
      resize
        当浏览器窗口被调整宽高时会触发 会重复触发
      scroll
        滚动条滚动时会触发 会重复触发

    键盘事件

      keydown 按下键盘任意键触发 如果按住不放会重复触发
      keypress 按下键盘字符键触发
      keyup   释放按键时触发

事件语法格式

选择器.事件(触发函数);

eg:         当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素

$("p").click(function(){
  $(this).hide();
});

jQuery效果

jquery封装了许多好用的效果

显示/隐藏

实例：

$("#hide").click(function(){   //隐藏p元素
  $("p").hide();
});
 
$("#show").click(function(){    //显示p元素
  $("p").show();
});
$("button").click(function(){   //显示/隐藏p元素
  $("p").toggle();
});

淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

滑动

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。                                              不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条

 这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

例子

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

或者这么写

$("#p1").css("color","red")                                                                                                                   .slideUp(2000)                                                                                               .slideDown(2000);