jQuery 基础

huangyongxing310

浏览: 498996 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery

jQuery

jQuery 简介
用JavaScript来做的一个库，用于方便HTML DOM元素进行各种各样的操作的接口库.
就是用JavaScript封装了一些方便我们对HTML DOM元素进行各种各样的操作的接口库.
也可以理解为一个方便我们对HTML DOM元素进行各种各样的操作的API函数集
jQuery是不能进行逻辑处理的，逻辑处理要用JavaScript实现

jQuery 语法
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪函数(表示在HTML加载完成时触发的函数)
$(document).ready(function(){
--- jQuery functions go here ----
});

jQuery 选择器
jQuery 元素选择器
$(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 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

“:”表示是条件的意思
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素

: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") 所有标题元素 <h1> - <h6>
:animated 所有动画元素

:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格

s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素(就是多个选)

:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素

:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

jQuery 事件
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
$("button").click(function() {..some code... } )

实例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
    $("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery 名称冲突
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

就是jQuery默认是用$表示jQueryr的，但当有其他库也是用$表示简写时，就会冲突,
但这个方法可以解决这种冲突(就是你自己定义一个符号表示jQueryr)

默认：（它们一样）
jQuery("p").hide();
$("p").hide();

应用noConflict（它们一样）
var jq=jQuery.noConflict()
jQuery("p").hide();
jq("p").hide();//这样之后你就为jQuery定义了一个简化的符号了（$不再表示jQuery）

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

jQuery 效果 - 隐藏和显示

$(selector).hide(speed,callback); //显示 HTML 元素
$(selector).show(speed,callback); //隐藏 HTML 元素
$(selector).toggle(speed,callback); //切换 hide() 和 show() 方法(就是取反操作)
(可选)speed 参数:可以取以下值："slow"、"fast" 或毫秒
(可选)callback:是隐藏或显示完成后所执行的函数名称

$(selector).fadeIn(speed,callback); //淡入已隐藏的元素
$(selector).fadeOut(speed,callback); //淡出可见元素
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换(就是取反操作)
$(selector).fadeTo(speed,opacity,callback);//渐变为给定的不透明度（值介于 0 与 1 之间(值越小越透明)）

$(selector).slideDown(speed,callback); //向下滑动元素
$(selector).slideUp(speed,callback); //向上滑动元素
$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方法之间进行切换(就是取反操作)

$(selector).animate({params},speed,callback);
(必需)params 参数定义形成动画的 CSS 属性。

实例：
$("button").click(function(){
$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
});
});

实例：（使用相对值）
$("button").click(function(){
$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
});
});

实例：（使用预定义的值）
把属性的动画值设置为 "show"、"hide" 或 "toggle"，就是隐藏和显示
$("button").click(function(){
$("div").animate({
    height:'toggle'
});
});

实例：（使用队列功能）
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

$(selector).stop(stopAll,goToEnd); //用于停止动画或效果，在它们完成之前。
(可选)stopAll:规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
(可选)goToEnd:规定是否立即完成当前动画。默认是 false。
默认地，stop() 会清除在被选元素上指定的当前动画

实例：
$("#stop").click(function(){
$("#panel").stop();
});

jQuery Callback 函数
实例：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery 方法链接(由左向右一个个完成)
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条

例子:("p1" 元素首先会变为红色，然后向上滑动，然后向下滑动)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进:
如:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

jQuery DOM 操作
text() 设置或返回所选元素的文本内容(写时可选/String/Function(回调函数)类型)
html() 设置或返回所选元素的内容（包括 HTML 标记）(写时可选/String/Function(回调函数)类型)
val() 设置或返回表单字段的值(写时可选/String/Function(回调函数)类型)
attr() 方法用于获取属性值(写时可选/String/Function(回调函数)类型)

读：
alert("Text: " + $("#test").text()); //23
alert("HTML: " + $("#test").html()); //<b>23</b>
alert("Value: " + $("#test").val()); //123
alert($("#w3s").attr("href")); //http://www.w3school.com.cn

写:
$("#test1").text("Hello world!"); //设置或返回所选元素的文本内容
$("#test2").html("<b>Hello world!</b>"); //设置或返回所选元素的内容（包括 HTML 标记）
$("#test3").val("Dolly Duck"); //设置或返回表单字段的值
$("#w3s").attr("href","http://www.w3school.com.cn/jquery"); //设置属性
$("#w3s").attr({ //允许您同时设置多个属性
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
});

text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标(从0开始)，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。

jQuery - 添加元素
append() - 在被选元素的结尾插入内容(插入文本/HTML)
prepend() - 在被选元素的开头插入内容(插入文本/HTML)
after() - 在被选元素之后插入内容(插入文本/HTML)
before() - 在被选元素之前插入内容(插入文本/HTML)

append() 和 prepend() 方法能够通过参数接收无限数量的新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。
实例:
function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

jQuery - 删除元素
remove() - 删除被选元素（及其子元素）,方法也可接受一个参数，允许您对被删元素进行过滤。
empty() - 从被选元素中删除子元素(只删除子元素)

实例
$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素

jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例:
.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

$("h1,h2,p").addClass("blue");
$("div").addClass("important");
$("#div1").addClass("important blue");//规定多个类
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");//对被选元素进行添加/删除类的切换操作(就是取反操作)

返回 CSS 属性
css("propertyname");

实例:
$("p").css("background-color");

设置 CSS 属性
css("propertyname","value");

实例:
$("p").css("background-color","yellow");

设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});

实例:
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸(元素和浏览器窗口的尺寸)
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
$(document).width() 文档(HTML 文档)的宽度和高度
$(document).height()
$(window).width() 窗口（浏览器视口）的宽度和高度
$(window).height()

参考原文：http://www.w3school.com.cn/jquery

分享到：

jQuery 遍历基础 | JavaScript Window - 浏览器对象模型

2016-08-29 22:06
浏览 497
评论(0)
分类:互联网
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 基础

评论

发表评论

相关推荐

定时调用函数功能实现

uniApiJs

百度人脸识别

点击DIV触发上传文件的方法

前端格式化工具与检测工具选择与使用

indexedDb TEST

defineProperty Array push 监听

weuiJsLayer.js

dataViewCommonJs

editorconfig配置

commonJs

setFormData

高德地图获取地址

前端实现从剪贴板中获取数据

js prototype原理与使用

JS过滤树数据

javascript匿名函数与闭包

JavaScript 作用域和作用域链

Javascript函数

Javascript执行步骤与顺序

最近访客更多访客>>