博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day 55 jQuery 之事件 绑定等
阅读量:4486 次
发布时间:2019-06-08

本文共 8143 字,大约阅读时间需要 27 分钟。

 

属性选择器:

[attribute][attribute=value]// 属性等于  列入  $("input[value='male']").prop('chekced')  注意符号单引号双引号 判断单选框中 性别为男是否被选中  返回值为 false则为没有选中。[attribute!=value]// 属性不等于

例子:

// 示例$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签

隔行变色例子:   

主要就是这一行:  $('tr:even').addClass('h2');   找到偶数行,添加class属性
    
各行变色
# 姓名 年龄
1 egon ds
2 alex ss
3 jinxing ww
4 yuanhao cc
View Code

 

表单常用筛选

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

例子:

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

表单对象属性:

:enabled:disabled:checked        checkbox 筛选出中被选中的       用法  $(':checked')   找到被选中的ckeckbox:selected

例子:

$("input:enabled") // 找到可用的input标签

 

$(":selected")  // 找到所有被选中的option

筛选器

下一个元素:

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

上一个元素:

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

父亲元素:

$("#id").parent()     推荐用 .parent().parent()  这种方式,直到找到对应的父标签。$("#id").parents()  // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

儿子和兄弟元素:

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

查找元素:

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。当记不清后代关系的时候可以用着个来找后代 $("#id").find('.delete')

补充:

.first()// 获取匹配的第一个元素   如  $('li').frist();这个最常用      等价于 $('li:first()');.last()// 获取匹配的最后一个元素.not()// 从匹配元素的集合中删除与指定表达式匹配的元素.has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

 

示例:左侧菜单   支持链式操作 一句话能够实现很多功能

    
Title
菜单一
111
222
333
菜单二
111
222
333
菜单三
111
222
333

p

View Code

jQurey对象和DOM对象的相互转化:*****

 

 

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。   addClass('hide')  removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

示例:开关灯和模态框

CSS

css("color","red")//DOM操作:tag.style.color="red" 设置多个属性 .css({"color":'red',"border":'5px solid red'})

示例:

$("p").css("color", "red"); //将所有p标签的字体设置为红色  获取某种属性:$('p').css('color')

位置:

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

 

注    意

position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离如果找不到这样的元素,则返回相对于浏览器的距离

offset()始终返回相对于浏览器文档的距离,它会忽略外层元素。

 

在父级标签含有相对位置属性的时候

示例:

    
Title
View Code

 

尺寸:

height() 盒子模型的内容的高width()innerHeight()   包含内padding的高innerWidth()outerHeight()  包含border的高度outerWidth()

文本操作

HTML代码:

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

文本值:

.text()// 取得所有匹配元素的内容.text(val)// 设置所有匹配元素的内容   如 $('li').last().text('200');  给li中最后个的值设置为200

值:

.val()// 取得第一个匹配元素的当前值  如 $('input').val()  当有多个 chrckbox 框时别选中时  如足球篮球都要背选中但是只显足球 取值默认取出第一个框中的值  $('input').val('4') 但是设置值的时候是给所有的都设置成4.val(val)// 设置所有匹配元素的值    如 $('input').val();  获取input框中的value值.val([val1, val2])// 设置checkbox 、select的值 一样可以设置选定的值

示例:

 

设置让城市选择两个  

 

重要

 

 

 

自定义登录校验

  
文本操作之登录验证
View Code

属性操作

用于自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值  如 $('#d1').attr('egon');  可以取出自己设置的属性egon 中的值attr(attrName, attrValue)// 为所有匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop()          当取到属性为true或者false时 推荐用prop removeProp()

 重要

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

 

上面的描述也许有点模糊,举几个例子就知道了。 

 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

 

 

 

 

注意:

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。

示例:全选、反选、取消

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。

替换

replaceWith()replaceAll()

克隆

clone()// 参数

示例:

点击按钮复制。

事件

常用事件

click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...})keyup(function(){...})

事件绑定

  1. .on( events [, selector ],function(){})
  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数

移除事件

  1. .off( events [, selector ][,function(){}])

off() 方法移除用[ .on()绑定的事件处理程序。

  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数

阻止后续事件执行

  1. return false;// 常见阻止表单提交等

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

两种写法:

$(document).ready(function(){// 在这里写你的JS代码...})

简写:

$(function(){// 你在这里写你的代码})

 列子:点击回顶部

  
位置相关示例之返回顶部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
返回顶部示例
View Code

 

转载于:https://www.cnblogs.com/wangkun122/p/8185399.html

你可能感兴趣的文章
用Okhttp框架登录之后的Cookie设置到webView中(转)
查看>>
Java_Activiti5_菜鸟也来学Activiti5工作流_之入门简单例子(一)
查看>>
设计模式(一)工厂模式Factory(创建型)
查看>>
linux中安装软件的集中方法
查看>>
Express中间件,看这篇文章就够了(#^.^#)
查看>>
《构建之法》(五)
查看>>
创建django项目
查看>>
Linux Bash基本功能
查看>>
一则小脚本(工作中用)
查看>>
软件工程结对作业
查看>>
Keil 4.0 生成bin文件
查看>>
sql语句的进化--hibernate篇
查看>>
python爬虫之cookie
查看>>
2017年5月29号课堂笔记
查看>>
HDU4247【瞎搞】
查看>>
lightoj 1125【背包·从n个选m个】
查看>>
HDU 1243 反恐训练营(最长公共序列)
查看>>
mysql数据库隔离级别
查看>>
(六)buildroot使用详解
查看>>
chrome修改UserAgent,调试
查看>>