码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基本整理1

时间:2018-01-11 22:32:52      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:语法   遍历   fas   查询   focus   block   实例   bootstra   down   

jQuery基本整理<1>

@[基本实例|基于bootstrap框架]


[TOC]

jQuery简介

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:

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

jQuery语法

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

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作
//所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
--- jQuery functions go here ----
});

jQuery选择器

jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

  • $("p") 选取 <p> 元素。
  • $("p.intro") 选取所有 class="intro" 的 <p> 元素。
  • $("p#demo") 选取所有 id="demo" 的 <p> 元素

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

  • $("[href]") 选取所有带有 href 属性的元素。
  • $("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
  • $("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
  • $("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素

jQuery CSS 选择器

$("p").css("background-color","red");

表格
|语法|描述
|---|---
|$(this)| 当前 HTML 元素
|$("p")| 所有 <p> 元素
|$("p.intro")| 所有 class="intro" 的 <p> 元素
|$(".intro")| 所有 class="intro" 的元素
|$("#intro")| id="intro" 的元素
|$("ul li:first")| 每个 <ul> 的第一个 <li> 元素
|$("[href$=‘.jpg‘]") |所有带有以 ".jpg" 结尾的属性值的 href 属性
|$("div#intro .head")| id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery事件

常用jQuery事件
-$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)

  • $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
  • $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
  • $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
  • $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
    更多jQuery事件

    jQuery效果(1)

    jQuery隐藏和显示

    ```javascript
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    //可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
    //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

//示例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
javascript
$(selector).toggle(speed,callback);
//示例
$("button").click(function(){
$("p").toggle();
});
```

jQuery淡入淡出

通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

fadeIn

jQuery fadeIn() 用于淡入已隐藏的元素
语法$(selector).fadeIn(speed,callback);

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut

jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery滑动

通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle()

    slideDown

    jQuery slideDown() 方法用于向下滑动元素。
    $(selector).slideDown(speed,callback);

    $("#flip").click(function(){
      $("#panel").slideDown();
    });

    slideUp

    jQuery slideUp() 方法用于向上滑动元素
    $(selector).slideUp(speed,callback);

    $("#flip").click(function(){
      $("#panel").slideUp();
    });

    slideToggle

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。用于向上滑动元素
    $(selector).slideToggle(speed,callback);

    $("#flip").click(function(){
      $("#panel").slideToggle();
    });

jQuery基本整理1

标签:语法   遍历   fas   查询   focus   block   实例   bootstra   down   

原文地址:https://www.cnblogs.com/ustc-rjgc2017/p/8270427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!