JQuery

属性选择器:

属性选择器:
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于 表单筛选器:
$(":checkbox") //找到所有的checkbox属性
:text
:password
:file
:radio
:checkbox --按钮
:submit
:reset
:button --表单对象属性:
:enabled
:disabled
:checked ( 选中)
:seleted (select : 选中)
筛选器方法:

下一个元素:
$('#id').next() -->
$('#id').nextAll()
$('#id').nextUntil() 上一个元素:
$('#id').prev()
$('#id').prevAll()
$('#id').prevUntil() 父亲元素:
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。 儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们 查找: find()
搜索所有与指定表达式匹配的元素
$("div").find('p') === $('div p') 筛选: filter()
筛选出与指定表达式匹配的元素集合。用于缩小匹配的范围
$('div').filter('.c1') === $('div.c1') .first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

操作标签

操作标签:

1.样式操作:
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加 eG:
css("color","red")//DOM操作:tag.style.color="red" $("p").css("color", "red"); //将所有p标签的字体设置为红色 2.位置操作:
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 .offset()方法允许我们检索一个元素相对于文档(document)的当前位置。--》dom文档 和 .position()的差别在于: .position()是相对于相对于父级元素的位移。 ---》 父标签 2.1 尺寸:
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

文本操作:

html代码:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容 文本值:
text() // 取得所有元素的内容
text(val) // 设置所有匹配元素的内容 值:
val() : //取得第一个匹配元素的当前值
val(val): //设置所有匹配元素的内容
val([val1, val2])// 设置多选的checkbox、多选selected的值 $("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"]) 链式获取值: 调用对象的方法--, 返回对象本身-

属性操作

#属性操作:
--》attr 静态获取属性值
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性 ---》prop 动态获取属性值
checkbox和radio(用户输入内容)
prop() // 获取属性
removeProp() // 移除属性 prop和attr的区别: attr全称attribute(属性)
prop全称property(属性) 虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。 attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。(能看到的属性和自定义属性) 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

文档处理:--》换位 ,添加,删除,替换,复制

添加到指定元素内部的后面:
$(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()// 参数
// clone方法加参数true,克隆标签并且克隆标签带的事件
// clone方法不加参数true,克隆标签但不克隆标签带的事件

事件

事件:

1.常用事件:
click(function(){...}) --》点击
hover(function(){...})---》浮动
blur(function(){...})--》失去焦点
focus(function(){...}) --》聚焦
change(function(){...}) --》改变内容
keyup(function(){...}) --》 松开键盘 2。事件绑定:
结构: .on( events [, selector ],function(){})
第一种语法结构:
$(选择器).事件名(function(){
// 事件代码
})
第二种语法结构 用处更广
$(选择器).on('事件名',function(){
// 事件代码
}) 3.移除事件:
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序 4.阻住后续事件的执行: 1. return false
2.e.preventDefault() -->e:function(e) 注意:
像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。 5.阻止事件冒泡:
--》当执行div标签内的span便签,则可以有树节点网上执行 $("span").click(function (e) {
alert("span");
e.stopPropagation();
});
--》e.stopPropagation() : 只在本标签执行,不会往上 6.页面载入:
DOM载入就绪可以查询及操纵时绑定一个要执行的函数。是事件模块中最重要的一个函数,可以极大地提高web应用程序的响应速度。 $(document).ready(function(){
// 在这里写你的JS代码...
}) 简写:
$(function(){
// 你在这里写你的代码
}) 与window.onload的区别:
window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数 7.事件委托:
--事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件 表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})

js之juery的更多相关文章

  1. js与juery基础知识对比(一)---2017-05-06

    用表格做的,想要对比的内容一目了然,红色部分为重点   js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...

  2. 从零开始构建一个的asp.net Core 项目

    最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程. 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5).我们会在页面上看到"He ...

  3. 从零开始构建一个的asp.net Core 项目(一)

    最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程. 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5).我们会在页面上看到“Hello W ...

  4. Juery插件-- jquery.cookie.js

    1.引入jquery <script src="scripts/jquery-1.8.8.js" type="text/javascript">&l ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  7. juery实现贪吃蛇的游戏

    今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感.另外关于代码内容如有雷同不胜荣幸. 更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么 ...

  8. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  9. 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

    juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...

随机推荐

  1. luogu p2705 小球

    题目部分 题目描述 有 R 个红色盒子和 B 个蓝色盒子,还有 R 个红色小球和 B 个蓝色小球.每个盒子只能装一个小球,每个小球都要放在一个盒子里. 如果把一个红色小球放在一个红色盒子里,那么得分是 ...

  2. Flask高级

    关于Flask启动,和请求处理 #关于后端服务的启动,无非就是启动实现了WSGI协议的socket #关于flask启动的无非就是下面两段代码 #加载配置,创建Flask对象 app = Flask( ...

  3. Prometheus 安装Alertmanager集成

    Prometheus 安装Alertmanager集成 # 下载地址 地址1:https://prometheus.io/download/ 地址2:https://github.com/promet ...

  4. Natasha V1.3.6.0 的升级日志

    开源库满足于个人,而完善于大众. Natasha 自稳定版发布之后,众多老铁参与增强改进,感谢如下老铁的反馈: 1. 异常搜集 在 wenjq0911 建议下,添加了异常捕获,现 Natasha 的编 ...

  5. Flask应用启动流程

    目录 flask应用启动流程 WSGI 启动流程 flask应用启动流程 WSGI 所有的 python web 框架都要遵循 WSGI 协议 在这里还是要简单回顾一下 WSGI 的核心概念. WSG ...

  6. NLog日志

    配置nlog 1.从nuget中获取配置 安装前2个文件 然后会有一个NLog.config 更改内容 <?xml version="1.0" encoding=" ...

  7. python3高阶函数

    高阶函数英文叫Higher-order function. 变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用该函数用以下代码: >>> abs(-10) 10 ...

  8. my97Date如何多选日期且无重复日期

    最终的效果是: 首先引用my97Date的js WdatePicker.js html代码 <textarea cols="" name="txtNoUseDate ...

  9. 数据库系统(四)---关系型数据库设计及E-R图

    1.关系型数据库: 关系型数据库是一类采用关系模型作为逻辑数据模型的数据库系统,遵从数据库设计的基本步骤,包括:需求分析.概念结构设计.逻辑结构设计.物理结构设计.数据库实施.数据库的运行和维护等阶段 ...

  10. 0x04 Python logger 支持多进程日志按大小分割

    目录 支持多进程日志按大小分割 多进程日志大小分割handler配置实例 支持多进程日志按大小分割 由于python内置模块logging.handlers.RotatingFileHandler是不 ...