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操作类时的一些问题,然后介绍正确的使 ...
随机推荐
- jsoup使用样式class抓取数据时空格的处理
最近在研究用android和jsoup抓取小说数据,jsoup的使用可以参照http://www.open-open.com/jsoup/;在抓纵横中文网永生这本书的目录内容时碰到了问题, 永生的书简 ...
- 黑马程序员+ADO.Net基础(下)
---------------<a href="http://edu.csdn.net"target="blank">ASP.Net+Android ...
- 在线教学、视频会议 Webus Fox(1)文本、语音、视频聊天及电子白板基本用法
Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能. 1. 登录 访问 http://flash.webus.cn/#,用自 ...
- [.NET领域驱动设计实战系列]专题一:前期准备之EF CodeFirst
一.前言 从去年已经接触领域驱动设计(Domain-Driven Design)了,当时就想自己搭建一个DDD框架,所以当时看了很多DDD方面的书,例如领域驱动模式与实战,领域驱动设计:软件核心复杂性 ...
- objective-c(框架)
框架指objective-c的foundation库,下面的例子中给出几个常见用的类及其方法. 数值对象 NSNumber *intNum; NSNumber *longNum; NSNumber * ...
- Unity3D入门之Unity3D介绍以及编辑器的使用(1)
1.Unity3D介绍 Unity3D是跨平台(IOS.Android.Windows Phone.Windows.Flash.XBOX360.PS3.Wii等)游戏引擎,可以开发2D.2.5D.3D ...
- Python2.6下基于rsa的加密解密
生成公钥的私钥: # -*- coding: UTF-8 -*- import rsa import base64 (public_key, private_key) = rsa.newkeys(10 ...
- OpenSSL密码算法库: MD5示例小程序
OpenSSL http://www.openssl.org/ OpenSSL整个软件包大概可以分成三个主要的功能部分:密码算法库.SSL协议库以及应用程序.OpenSSL 的密码算法库包含多种加密算 ...
- SOA服务设计与实现的几个语言无关的原则速记
一.SOA定义 SOA即面向服务架构(Service-Oriented Architecture).在SOA中,一切皆服务.一个服务是通过消息交换来调用的程序,一个信息系统是共同完成一个特定任务的一组 ...
- read links July-14
1) http://ruby-hacking-guide.github.io/intro.html It has one part to discuss “Technique to read so ...