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

JQuery学习笔记

时间:2018-03-19 11:41:21      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:ajax   表达式   class选择器   文档   偶数   官方   col   筛选   选择   

一、JQuery介绍

JQuery是一个轻量级、兼容多浏览器的JavaScript库。可以更方便的处理HTML Document、Events、实现动画效果、方便的进行Ajax交互,能够极大的简化JavaScript编程。

JQuery1.X版本兼容IE678,官方制作BUG维护,功能不更新。3.x版本不兼容IE678,只支持最新浏览器,官方主页维护该版本。

JQuery对象是JQuery包装DOM对象后产生的对象,如可以通过$("#i1").html()获取id值为i1的元素的html代码。JQuery对象无法使用DOM对象的任何方法。

一般在声明一个JQuery对象变量的时候在变量名前面加上$,如 var $variable = JQuery对象。可以通过$variable[0]将JQuery对象转为DOM对象。

二、JQuery基础语法

1.查找标签

id选择器:

$("#id")

标签选择器:

$("tagName")

class选择器:

$(".calssName")

配合使用:

$("div.c1")  //具有c1样式类的div标签

所有元素选择器:

$("*")

组合选择器:

$("#id,.className,tagName")

层级选择器:

x和y可以为任意选择器

$("x y");   //x的所有后代y
$("x > y"); //x的所有儿子y
$("x + y"); //找到所有紧挨在x后面的y
$("x ~ y"); //x之后所有的兄弟y 

基本筛选器:

:first  //第一个
:last    //最后一个
:eq(index)  //索引等于index的那个元素
:even     //匹配所有索引值为偶数的元素,从0开始计数
:odd     //匹配所有索引值为计数的元素,从0开始计数
:gt(index)  //匹配所有大于给定索引值的元素
:lt(index)   //匹配所有小于给定索引值的元素
:not(元素选择器)   //移除所有满足not条件的标签
:has(元素选择器)  //选取所有包含一个或多个标签在内的标签(后代元素中找)

属性选择器:

[attribute]
[attribute=value]   //属性等于
[attribute!=value]   //属性不等于

示例:

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]") ; //选取checkbox类型的input标签
$("input[type!=‘text‘]");    //选取类型不是text的input标签

表单常用筛选器:

:text
:password
:file
:redio
:checkbox
:submit
:reset
:button

示例:

$(":checkbox")   //找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

示例:

<form>
    <input name="email" disabled="disabled">
    <input name="id">
</form>

$("input:enabled")  //找到可用的input标签
<select id="s1">
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option selected value="guangzhou">广州市</option>
    <option value="shenzhen">深圳市</option>
</select>
$(":selected")  //找到所有被选中的option

2.筛选器

下一个元素:

$("#id").next()
$("#id").nextALL()
$("#id").nextUntil("#i2")

上一个元素:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素:

$("#id").parent()
$("#id").parents()   //查找当前元素的所有父辈元素
$("#id").parentUntil("#i2") //查找当前元素的所有父辈元素,知道遇到匹配的那个元素为止。

儿子和兄弟元素:

$("#id").children();   //儿子们
$("#id").siblings();   //兄弟们

查找元素:

$("#id").find()  //搜索所有与指定表达式匹配的元素。

补充:

.first()  //获取匹配的第一个元素
.last()   //获取匹配的最后一个元素
.not()   //从匹配元素的集合中删除与指定表达式匹配的元素
.has()   //保留包含特定后代的元素,去掉那些不包含指定后代的元素。

3.操作标签

样式类:

addClass();   //添加指定的css类名
removeClass();   //移除指定的css类名
hasClass();   //判定样式是否存在
toggleClass();  //切换css类名,如果有就删除,如果没有就添加

示例:开关灯的模态框

//CSS
css("color","red") //DOM操作:tag.style.color="red"
//JQuery
$("p").css("color","red")

位置:

offset()   //获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  //获取匹配元素相对父元素的偏移
scrollTop()  //获取匹配元素相对滚动条顶部的偏移
scrollLeft()  //获取匹配元素相对滚动条左侧的偏移

.offset()方法允许检索一个元素相对于文档(document)的当期位置。和.position()的差别在于.position()是相对于父级元素的位移。

尺寸:

height()
width()
innerHeight()
innerWidth()
outterHeight()
outerWidth()

文本操作

html代码:

html()   //取得第一个匹配元素的html内容
html(val)  //设置所有匹配元素的HTML内容

文本值:

text()   //取得所有匹配元素的内容
text(val)   //设置所有匹配元素的内容

值:

val()   //取得第一个匹配元素的当前值
val(val)  //设置所有匹配元素的值
val([val1,val2])   //设置checkbox、select的值

示例:

获取被选中的checkbox或radio的值

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

JQuery中使用

$("input[name=‘gender‘]:checked").val()

属性操作

用于id等或自定义属性:

attr(attrName)  //返回第一个匹配元素的属性值
attr(attrName,attrValue)  //为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2})  //为左右匹配元素设置多个属性值
removeAttr()   //从每一个匹配的元素中删除一个属性

用于checkbox和readio

prop()   //获取属性
removeProp()   //移除属性

 

JQuery学习笔记

标签:ajax   表达式   class选择器   文档   偶数   官方   col   筛选   选择   

原文地址:https://www.cnblogs.com/n1ghtwatcher/p/8600680.html

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