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操作类时的一些问题,然后介绍正确的使 ...
随机推荐
- HTML5-布局的使用
DIV布局: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- unity 状态机 + svn + 码云 上篇
最近刚找到在实习,忙于公司一个c++ 项目 ,一直想写博客来着,没时间写今天熬夜打算先献上自己前几天自己封装的一个fsm状态机 话不多说,直接上正题,这篇博客主要是在学校的时候状态机一直使用的是pla ...
- webapi 中使用 protobuf
相比json来说,好处是速度更快,带宽占用更小.其效果大致等于json+Gzip. 在webapi中使用protobuf的方法为: 引用nuget包 Install-Package protobuf- ...
- VS2013 生成安装文件
在VS2012之前,我们做安装包一般都是使用VS自带的安装包制作工具来创建安装包的,VS2012.VS2013以后,微软把这个去掉,集成使用了InstallShield进行安装包的制作了,虽然思路差不 ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- ZooKeeper学习第一期---Zookeeper简单介绍
一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...
- Wix 安装部署教程(九) --用WPF做安装界面
经常安装PC端的应用,特别是重装系统之后,大致分为两类.一类像QQ,搜狗输入法这样的.分三步走的:第一个页面可以自定义安装路径和软件许可.第二个页面显示安装进度条,第三个页面推荐其他应用.先不管人家怎 ...
- SQL Server 性能优化之——T-SQL 临时表、表变量、UNION
这次看一下临时表,表变量和Union命令方面是否可以被优化呢? 阅读导航 一.临时表和表变量 二.本次的另一个重头戏UNION 命令 一.临时表和表变量 很多数据库开发者使用临时表和表变量将代码分解成 ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- 《OOC》笔记(1)——C语言const、static和extern的用法
<OOC>笔记(1)——C语言const.static和extern的用法 C语言中const关键字用法不少,我只喜欢两种用法.一是用于修饰函数形参,二是用于修饰全局变量和局部变量. 用c ...