Jquery基本用法总结
选择器
$("#mydiv") 通过ID
$("p#myp") 选择id=myp 的所有p元素(组合型)
$(".mydiv") 通过 class="mydiv"
$("p.myp") 选择class=myp 的所有p元素
$("p").eq(1) 获取匹配的集合中的第二个元素 这个元素的位置是从0算起(与[i]的区别是eq获得的还是jquery元素,而[i]获得的是dom元素)
$("div:first") 选择第一个div
$("div:odd") 选择奇数行div
$('div:visible') //选择可见的div元素
$('div:gt(2)') //选择所有的div元素,除了前三个(:号的意义??)
$("div").has("p");选择包含p元素的div元素 ???
$("div").first() 选择第一个div ???
$("div").find("p") 选择div内的所有p元素
$("div").children() 取得所有div中的所有直接子元素,不考虑子元素的子元素
$("div").parents() 而parents将查找出所有祖辈元素
$("div").next() 取得紧邻的同辈元素,而不是后面所有的同辈元素(所有的用nextAll())
$("div").prev() 取得每个元素紧邻的前一个同辈元素的元素集合
$("form > input") 匹配表单中所有的一级子级input元素
$("form ~ input") 找到所有与表单同辈的 input 元素
属性选择器
采用XPath表达示来选择给定属性的元素
$("[href]") 选取所有带href属性的元素
$("[href='xxx']") 选取所有属性href='xxx' 的元素
$("[href*='.jpg']") 选取所有属性以.jpg结尾的元素
设置属性
$("div").attr("v","xxx");
$("div").removeAttr("v") 属性删除
复合选择器
$("input[id][name$='ma']") 选择所有含有id属性,且name属性以ma结尾的input元素
$("input:checked") 选择所有选中的筛选框元素
$("select option:selected") 选中所有选中的选项元素
改变HTML内容
$("div").html("xxxx") 相当于innerHTML
$("div").append("<p>xxx</p>") 向div(内部)html追加p标签
元素的操作:移动
如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。
假定我们选中了一个div元素,需要把它移动到p元素后面。
第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter('p');
第二种方法是使用.after(),把p元素加到div元素前面:
$('p').after('div');
表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。
使用这种模式的操作方法,一共有四对:
.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()。
$("input").val(xxx); 获取/设定 文本框中的值
$("input").text() 取出或设置text内容
如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。
CSS 选择器/更改
$("div").css("background-color","red") 把所有 p 元素的背景颜色更改为红色
$("div").width(xxx) /.height(sss)设置高度与宽度
Jquery基本用法总结的更多相关文章
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jquery cookie 用法
jquery cookie 用法 $.cookie("name","value","options") 当不设置options时,此coo ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- JQuery datepicker 用法
JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...
- jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...
- jquery.post用法补充(type设置问题)
jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...
- jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器
jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...
- jQuery 动画用法
jQuery动画: <head> <meta charset="UTF-8"> <title>Title</title> <s ...
- jquery cookie用法
jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...
随机推荐
- SQL调优之降龙十八掌系列
降龙十八掌是金庸小说的武功,招式名称取自<周易>,丐帮的镇帮绝学. 数据库性能优化是一门博大精深的学问.是一个大课题.本系列算是对数据库性能优化的一个总结,算是为2013年 划下一个句号. ...
- ThoughtWorks持续集成平台GO开源了
ThoughtWorks 持续集成平台Go最近宣布开源了.其基于Apache 2.0 开源协议. Go下载地址为http://www.go.cd/download/. 下面是几张来自官方的视图: GO ...
- HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
- location.href 一个小注意
项目里有location.href = '#......'这一类的代码,一直以为某处做了特殊处理,变成前面有主机名的URL,看架构源码也没找到这种处理.今天灵光一现,自己是被JS高程将解位置方法那节给 ...
- 锋利的JQuery —— DOM操作
图片猛戳链接
- mysql-5.7.17-winx64免安装版,win10环境下安装配置
下载地址:http://dev.mysql.com/downloads/file/?id=467269 1.解压到自定义目录:我解压到了D盘的根目录 2.复制my-default.ini 重命名 my ...
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染
在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...
- DOM对象 与 jQuery对象 之间的相互装换
示例代码: //jQuery对象转DOM对象 //因为jQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式 var $div1 = $("#div1"); //jQ ...
- 每天一个linux命令(31): /etc/group文件详解
Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和用户组管理时相关的文件.linux /etc/group文件是有关于系统管理员对用户 ...
- 第七节:Class与Style绑定
1.绑定class,v-bind:class 简写为::class 对象方式: <!-- 绑定一个class对象,也可以绑定data中的对象--> <span v-bind:cla ...