您的位置:首页 > Web前端 > JQuery

**JQUERY**系列一:jQuery简介

2016-07-24 11:53 399 查看
>作用

>>jQuery是JS的一个库,简化了JS的编程。

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

<script type = "text/javascript" src= "jquery.js" ></script>

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js></script>

<script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js">

>语法

>>基本形式

$(selector).action()

$定义了jQuery变量或函数

selector表示选择符,指向某个对象

action执行对元素的操作

>>四种不同的选择器

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

>>文档就绪函数

$(document).ready(function(){

函数实体

})

>选择器

>>选择器允许对DOM元素组或单个DOM节点进行操作

>>选择器可以是标签名、属性名、内容、id、类名等

>>选择器分类:

jQuery元素选择器:

$("p")选取<p>的元素

$"p.intro"选取所有class = intro的元素

$("p#demo")选取id = demo的元素

jQuery属性选择器:

$("[href]")选取所有带有href属性的元素

$("[href = '#']")选取特定的属性选择器

jQuery css选择器:

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

语法描述
$(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处理事件

>>举例

$(docment).ready(

$("button").click(

function(){

$("p").hide();

}

));

>>jQuery处理事件遵循的原则

把所有的jQuery代码至于事件处理函数中

把所有时间处理函数置于文档就绪事件处理器中

把jQuery代码置于单独的.js 文件中

如果存在名称冲突,则重命名jQuery库

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

>>jquery中常见的函数

Event 函数绑定函数至
$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  事件处理 jQuery