jquery常用

Jquery->DOM
(1).使用[index]方式
var $cr = $('#cr');
var cr = $cr[0];
(2).使用get(index)方法
var $cr = $('#cr');
var cr = $cr.get(0);
DOM->Jquery
(1).使用$(DOM对象)方式,$()相当于Jquery的对象工厂
var cr = document.getElementById('cr');
var $cr = $(cr);

选择器
基本选择器(一般用于快速选择节点)
$('#cr/.cr/div/*/cr, #cr').css('background','#FFAABB');

后代选择器(后代包含子还包含孙子)
$('div span')
子元素选择器(只选中儿子,不选择孙子)
$('body > div')
相邻选择器(选择相邻的所有span元素)
$('div + span')
同辈选择器(选择同辈的所有span元素)
$('div ~ span')
过滤选择器
$('div:first')
$('div:last')
$('div:not(.div1)')
$('div:odd')
$('div:even')
$('div:eq(index)')
$('div:gt(index)')//选取索引大于index的div元素
$('div:lt(index)')//选取索引小于index的div元素
$(':header')//选取所有标题元素
$(':animated')//选取当前正在执行动画的元素
$(':focus')//选取当前获取焦点的元素
$('div:contains(text)')//选取文本含有text的div元素
$('div:empty')//选取不含子元素或者文本元素的空div元素
$('div:has(p)')//选取含有p标签的div元素
$('div:parent')//选取含有子元素或文本的div元素
$(':hidden')//选取文档流中不可见的元素
$('div:visible')//选取所有可见元素

$('div[title]')//选取拥有title属性的div元素
$('div[title=test]')//选取title属性值为test的div元素
$('div[title!=test]')//选取title属性值不等于test的div元素
$('div[title^=te]')//选取title属性值以te开头的div元素
$('div[title$=st]')//选取title属性值以st结尾的div元素
$('div[title*=es]')//选取title属性值含有es的div元素
$('div[title]=en')//选取title属性值是en或者前缀(指en后面有-即-)是en的div元素
$('div[title~=uk]')//选取title属性值中用空格分隔开并含有uk的div元素
$('div[attribute1][attribute1][attribute1]')//选取复合属性满足条件的元素

$('div :nth-child(index)')//选取所有div元素中指定条件index的子元素(index:n/even/odd/3n/3n+1)
$('div :first-child')//选取所有div元素中的第一个子元素
$('div :last-child')//选取所有div元素中的最后一个子元素
$('div :only-child')//选取所有div元素中唯一的子元素

$('input :enabled')//选取所有可用的input元素
$('input :disabled')//选取所有不可用的input元素
$('input :checked')//选取所有被选中的input元素
$('select option:select')//选中所有被选中select中的option元素

$(':input')//选中所有的input/textarea/select/button元素
$(':text')//选中所有的单行文本框
$(':password')//选中所有的密码框
$(':radio')//选中所有的单选框
$(':checkbox')//选中所欲的复选框

var $li_i = $("<li></li>")//创建元素节点
append() prepend()//向每个匹配元素的内部追加后置/前置元素 内部插入节点
appendTo() prependTo()//将所有匹配的元素,追加到指定元素中
after() before()//在匹配的元素之后插入内容
insertAfter() insertBefore()//将所有匹配的元素插入到指定元素后面

remove()//删除节点(包含后代节点),返回引用
detach()//删除节点(效果同上),但不会将匹配的元素从对象中删除,因此之前绑定的时间和附加的数据等都会保留
empty()//不是删除节点,是清空节点,能够清空元素中的所有后代节点,保留原节点

clone()//克隆当前选择器选中的节点,支持连贯操作,如$(this).clone().appendTo('xxx');
replaceWith()//将所匹配的所有节点及其后代节点替换成指定的HTML或DOM元素 先匹配 后替换创造
replaceAll()//将工厂创造的HTML或DOM元素覆盖匹配到的节点及后代元素上 先创造 后匹配替换
$("strong").wrap("<p></p>");//将strong标签使用p标签包裹起来,使用wrap(),如果匹配的到多个元素,将在匹配的每个元素外面单独包裹
$("strong").wrapAll("<p></p>");//将匹配元素作为一个整体,包裹一个创造的p标签,如果包裹的元素之间有其他元素,其他元素会被放到包裹元素之后
$("strong").wrapInner("<p></p>");//包裹匹配元素的子元素(包含文本节点)

$("p").attr("title");//获取属性
$("p").attr("title","标题");//设置属性
$("p").attr("title":"my title","name":"zhao","age":10);//设置多个属性 使用同一个函数实现获取和设置值的函数还有"html()/text()/height()/width()/val()/css()
$("p").removeAttr("title");//移除属性

$("p").attr("class");//获取类
$("p").attr("class","otherClass");//设置类
$("p").addClass("two");//添加类
$("p").removeClass("one");//移除类
$("p").toggleClass("two");//切换类
$("p").hasClass("one");//判断是否含有某个类

html()方法类似于innerHTML;用于读取和设置某个元素中的"HTML内容"(指HTML标签及文本)
$("p").html();
$("p").html("<strong>你最喜欢的水果是?</strong>");
注:可用于XHTML不可用于XML

text()方法类似于innerText;用于读取或者设置某个元素中的文本内容(不包含标签)
$("p").text();
$("p").text("你最喜欢的水果是?");
注:innerText属性并不能Firefox浏览器下运行,而JQuery的text()方法所有浏览器都适用,并且对html和xml都有效

val()方法类似于value属性;用于读取或者设置某个元素的值
$("p").val();
$("p").val("这是P标签");
注:除了用于获取和设置value值,还可以改变选中项.选中多项时候,用,分隔
$("p").val(["check2","check3"]);

1).children()方法用于获取"匹配元素"的"子元素集合"
$("p").children().length;//获取p元素的子元素的个数
注:children()只考虑子元素,不考虑后代元素
2).next()方法用于取得匹配元素后面紧邻的同辈元素
$("p").next();//获取p元素紧邻后面的同辈元素
3).prev()方法刚发用于取得匹配元素前面紧邻的同辈元素
$("p").prev();//取得p元素前面紧邻的同辈元素
4).siblings()方法取得匹配元素前后的所有同辈元素
$("p").siblings();// 取得同辈元素
5).closest()方法用于获取最近的匹配元素
6).parent()
7).parents()

css()方法获取和设置元素的样式属性
$("p").css("color");
$("p").css("color","red");
注:和attr()一样,可以设置多个样式属性 $("p").css({"color":"red","background":"#000"});
透明度可以直接用 $("p").css("opacity");

offset()用于获取元素在当前视窗的相对偏移
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;

position()用于获取相对于最近的一个position样式属性的设置为relative或者absolute
var position = $("p").position();
var left = position.left;
var top = position.top;

scrollTop()方法和scrollLeft()方法用于获取元素的滚动条距顶端的距离和左侧距离
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • 首先附上jQuery官网 http://jquery.com/ 2.0版本开始放弃了对IE7/8及其之前版本的...
    风之帆阅读 688评论 4 2
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,354评论 0 44
  • 1, UIWebView的基本使用: 我这里以加载百度网页为例演示一下UIWebView的基本使用 如图: UIW...
    张不二01阅读 373评论 0 1
  • 夜里梦见你被我弄丟了,害的心跳而醒,找了一天未果,心里惦记
    珠粉儿阅读 201评论 0 0
  • 回忆有时候就像打翻的急支糖浆,又稠又腻。想念旧时光,也厌恶旧时光。左边是光影,右边则是思念。倘若时光是异次元,那么...
    粉红兔子阅读 204评论 0 1