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操作类时的一些问题,然后介绍正确的使 ...
随机推荐
- zabbix3.x搭建(1)
服务器端安装配置: 1).安装: yum -y install gcc gcc-c++ autoconf httpd php mysql mysql-server php-mysql httpd-ma ...
- Android ViewPager 用法
Android ViewPager 用法 场景:一般第一次打开应用程序时,程序会有一个提示页来给展现应用程序都有哪些功能:或者程序更新时,又更新哪些新特性,都可以使用ViewPager Demo 描述 ...
- iOS 删除已经配置的类库和移除CocoaPods
引言 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,但是不由得产生一个疑问:如果发现某个类库不适用,甚至是整个CocoaPods我们都不想再在项目中持有,那么我们要怎么把这些 ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- JDBC学习2:为什么要写Class.forName("XXX")?
Class.forName(String name) 接上一篇JDBC.本来这个内容是放在前面的一篇里面的一起的,后来发现越写越多,想想看就算了,还是单独开一篇文章好了,这样也能写得更加详细点. 上一 ...
- Java提高篇(二六)-----hashCode
在前面三篇博文中LZ讲解了(HashMap.HashSet.HashTable),在其中LZ不断地讲解他们的put和get方法,在这两个方法中计算key的hashCode应该是最重要也是最 ...
- js作用域问题一步步透彻理解
黄金守则第一条: js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到. first try: 这是为什么呢?? var a ...
- 更改Photoshop 语言为英语(无需语言包)
因为有时看国外教程时,手头上的PS是中文的而教程里的界面是英文的,而且中英菜单顺序在某些地方是不一样的,所以很不方便. 终于找到一个非常完美的方法可以把界面换成英文,而且不需任何语言包. 并且试了在最 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- MyBatis学习总结(六)——调用存储过程
一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 1 create table p_user( 2 id int primary key auto_ ...