1.jQuery简介及使用

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

jQuery 库包含以下特性：

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

下载地址

我用的是jQuery1.12.4版本

uncompressed：未压缩版本，适用于开发环境，方便查看源代码
minified：压缩版本，适用于生产环境

jQueryapi文档

官方api文档：英文版本，如果你使用的技术是最新的技术，用到了新的特性，此时就需要从官方文档中查看新特性的使用方式。
在线中文API手册 / 在线中文API手册：可以通过在线API中文手册，查看jquery中函数的使用方式
离线API中文手册：点击链接自行下载，开发过程中我们的必备手册！

2.jQuery语法

通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

基础语法是：$(selector).action() 即 $(“#btn”) == jQuery(“#btn”)

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：
$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有段落
$(".test").hide() 隐藏所有 class="test" 的所有元素
$("#test").hide() 隐藏所有 id="test" 的元素

3.jQuery选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro")选取所有 class="intro" 的
元素。
$("p#demo") 选取所有 id="demo" 的
元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 div 元素的背景颜色更改为红色：
$("div").css("background-color","red")
简洁操作:
$("#box").css("border", "solid 1px red");
标准操作:

$("#box").css({
            "border":"solid 1px red",
            "background":"#efefef"
            })

注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
如果是动态递增变化的样式，可以通过JS代码进行处理。

内容操作

常规开始标签和结束标签中间的内容操作
var $boxValue = $("#box").text(); $("#box").text("添加的内容")
表单元素的数据
var $name = $("#username").val();

属性操作

var $id = $("#box").attr("id") $("#box").attr("id", "container")

元素元素

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一个元素
:last	$("p:last")	最后一个元素
:even	$("tr:even")	所有偶数
:odd	$("tr:odd")	所有奇数
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 `-`
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:button	$(":button")	所有 type="button" 的元素
:image	$(":image")	所有 type="image" 的元素
$(this)		当前 HTML 元素

4,jQuery 事件函数及效果显示

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到部分的事件处理方法中.

$("selector").show显示 HTML 元素
$("selector").hide隐藏 HTML 元素
$("selector").toggle(speed,callback)显示 / 隐藏HTML 元素

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback)

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

代码操作：




    
    动画效果展示

效果展示

图片轮播特效

代码操作：




    
    轮播图动态展示
    
    
    



    
        ![](images/psb (10).jpg)
        ![](images/psb (12).jpg)
        ![](images/psb (3).jpg)
        ![](images/psb (4).jpg)
        ![](images/psb (5).jpg)
        ![](images/psb (6).jpg)
        ![](images/psb (37).jpg)
        ![](images/psb (32).jpg)

效果展示：

图片轮播特效

导航栏上下滑动效果

效果：

导航栏滑动效果展示

图片翻转效果




    
    图片翻转



    


    
    
    



    
        ![](images/bsj1.jpg)
        ![](images/bsj2.jpg)

效果展示：

图片翻转特效

jQuery

1.jQuery简介及使用

2.jQuery语法

3.jQuery选择器

-

4,jQuery 事件函数及效果显示

你可能感兴趣的:(jQuery)