JQuery 总结(1) 选择器的使用
一 注意:
1.DOM对象:通过原生js获取的DOm对象(DOm树上的节点就是,比如<li></li>)
2.jQuery对象:通过jQuery 选择器获取的
jQuery对象智能用jQuery中封装的方法,不能使用DOm对象的方法 同理 DOm也是一样
二 选择器相互更换:
1.DOM转换成JQ对象 $(“DOM对象”)
2.JQ对象转换成DOM对象 $("div")[index] 或者 $("div").get(index)
三 基本选择器
1. #id > $("#id名"),
2. .class > $(".class名")
3. element标签 > $("div")
4.群组选择器 > $("div,p")
5.* > $("*")
四 后代选择器 子元素选择器 紧邻的同辈选择器
1.$("#id li"), 这个是所有的后代
2. $("#id > li"), 这个是只查到儿子为止
3. $("#id + p ") 紧挨着#id 后面的p元素
4. $("#id ~ p ") 在#id 后面的同辈兄弟p元素
五.表单元素选择器
<form>
<input type="text" />
<input type="checkbox"checked /> 复选框
<input type="radio" /> 单选框
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </body>
<script>
$("input:text").css({ "background":"red", width:200, height:100 })
$("input:enabled") 所有可用元素 disabled 不可用
$("input:checked") 所有选中的复选框
六.过滤元素选择器
过滤和其他的选择器搭配使用 这个基本通过下标来过滤
1.$("li:first") 所有的li中的第一个,$("li:last") 最后一个
2.$("li:eq(4)") 选择第4个 下标0开始
$("li:gt(4)") 下标大于4,great that 。
$("li:lt(4)") 下标小于4,little that。
$("li:nth-child(-n+3)") 和css类似 2n 2n+1,-n+3 一样使用
$("li").slice(1,2) 第1个到第二个 第二个不包含,如果不写后面的数字 一直到最后
$('.gg').prevUntil('.ab').css('backgroundColor', 'red'); 在ab到gg, 他们之间全部同辈元素选中
3. $("li:odd") 下标基数,$("li:even") 下标偶数
4. $("li:not(.a5)") 去除a5剩下的元素
5.$(":header") 获得所有的标题元素集合(H1-H6)
6.:animated 匹配正在执行动画的元素
li中 没动画的元素给加个动画 每100毫秒 left值增加200
$("li:not(:animated)").animate({ left:"+=200" },100 )
7. $("div").css("background", "orange").filter(".box").css("border-color", "red"); 全部的div设置橙色,其中 有class.box的设置 红色 好链式调用
$("div").filter(".box") 等效于 $("div.box")
8.if ($("p").parent().is("div")) { alert("p 的父元素是 div"); }用来判断p的父级是不是div 是的话返回 true
七:内容过滤选择器 (根据内容来筛选 子孙都算)
1.$("li:contains('hospital')").css("background","red") 在li中文本含有hospital的 变红色
$("li:not(li:contains('hospital'))").css("background","red") 在li中文本没有hospital的变红
li:contains('"+texta+"') 用变量的时候 用这个方法
$("span:contains('九江')").text("南昌") span中有九江的换成南昌
2. $("li:has(span)") 中查找有span元素的li
3. $("li:empty()") 筛选所有内容为空的li , $("li:parent()") 筛选所有内容非空的li
八 属性选择器
1. $("li[title]") 筛选出含有title 属性的元素
2. $("li[title='aac1']") 选择title等于aac1的元素,
$("li[title!='aac1']") 选择title不等于aac1的元素 没title的也算
$("li[title^='c1']") 以什么开头, $("li[title$='c1']") 以什么结尾,
$("li[title*='c']") 选择title值里面含有 c 的元素
$("li[id][title='aac']") 组合 属性中有id 而且 title=aac的元素
九 查找选择器
1.获取子元素
$("li").children("span") 获取li的儿子元素含有span
$("li").find("span") 获取li的子孙元素含有span,,find() 必需要有参数
2. 获取父级
$("span").parent() 获取 span元素的直接上级
$("span").parents() 获取 span元素的所有上级
3. 获取同级元素
1.$(".bb").prev() 前一个 prevAll()前面所有的同级
$(".bb").next() 后一个 nextAll()后面所有的同级
2.$(".bb").siblings() 所有的同级
一 元素选择:
1. $('*') 选择所有元素 默认选择document下的所有元素 或者选择某个div下的元素
2. $('#box') $('.box') $('p') $("div .p") 这些都是类似于css的选择方式 返回的是jquery对象
3.$('p:first') $('p:last') $('p:even') $('p:odd') ,第一个最后一个 奇数 偶数。
4.$("p:eq(3)") 列表中的第三个(0开始算),$("p:lt(1)") $("p:gt(1)") 从第几个开始 往后,和往前。
进阶:
$('#a').prevUntil('.b').css('backgroundColor', 'red'); 从a到b 之间的同辈元素都红
.siblings() 选取所有同辈元素
.prev() .next() 下一个兄弟,nextAll()后面同级所有,
.parent() 父级,children("a")儿子 有a的,
.find("p") 查找当前元素 所有的后代 只要符合条件,找出正在处理的元素的后代元素的好方法。
总结:用 $(this) 可以判断 事件发生是谁调用,就表示当前热点是给谁的,比如当前选中的标签 我想它其他的兄弟元素 改变样式,就要依托 当前元素的关系 ,然后找到其他的元素 改变 。
找出正在处理的元素的 兄弟关系 是最合适的
二 DOM 增删改查
A.增加
1. var div=$("<div/>"); var father=$("body"); father.append(div); 在father里面插入div 注意插入 的是jquery对象
father..prepend(div); 插在father的前面
2. var div=$("<div/>"); div.appendTo($("#wrap")); 把儿子塞到父亲里面。
div.prependTo($("#wrap")); 查到父亲的前面
3. $(".p2").after($("<span/>")) .p2的后面放span 这么理解
$("<span/>").insertAfter($(".p2")) 把span放到 p2的后面 [insert 是插入的动作]
4. before 和insertAfter 也是同上
B.删除
1 .$(".p2").remove(); 谁调用.remove() 就删谁
$a=$(".p2").remove(); 删完之后 用$a来接收,$a.insertAfter(".p3"); 把接收的东西插入到p3
2. $(".p4").empty(); 这个是清空p4下所有的节点 文字,儿子孙子什么的都清空 只留下p4
C.修改 查看 [ 注意这里既可以赋值 也可以 获取]
•text() - 取值和赋值都是一组,
•html() - 取值和赋值(带html标记)[碰到对象的话 取值第一个]
•val() - 设置或返回表单字段的值
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
三 属性添加
1. 添加css
$(".bb").css({
color:"red",
width:"100px",
height:"100px",
background:"orange"
})
获取css
console.log($(".p2").css("width")) 在这里获取到css样式内容 要提取数字 parseInt
2.添加属性和查看属性
固有属性:id class src href title type alt value .attr支持固有和自定义 ,.prop 只支持固有(判断checkbox动态返回true和false)
$('img').attr('src','1.jpg') 这种就是给img添加属性,[这个最好给固有属性添加],
($("div").attr('class')); 获取这个对象的class属性
$("#ccc").removeAttr("class") 删除样式
延伸 点击哪个按钮 下面img分别显示不同的图片
console.log($(this).css(["width","background"])) 同时查看两个属性。200px
console.log($(this).width()) 200 Number
width()content,
innerWidth()content+padding,
outerWidth() content+padding+border,
outerWidth(true) content+padding+border+margin,
console.log($(this).css("left")) 350px
console.log($(this).offset().left) 358 [相对窗口]
console.log($(this).position().left) 350 【相对有定位的父级】
arr.join(",")拼接字符串
1 2 3 4 5 6 |
|
1 |
|
1 2 3 4 5 6 7 8 9 10 |
|
1 |
|
1 |
|
可以设置多个值
$("img").attr({
src: "test.jpg",
alt: "Test Image"
});
在原生js中 document.getElementsByTagName("INPUT")[0] . setAttribute("type","button");
五 获取屏幕尺寸 偏移相关
$.offset().left 是指当前元素距离文档左边多少距离
var left=($(".p2")r.offset().left;
var top1=($(".p2").offset().top;
注意 $.position().left 这个才是获取 css中left的值
六 加载完DOM 再执行函数:
winodw.οnlοad=function(){} 所有包含图片加载完,然后再执行 效率低 而且只能使用一次。
$(document).ready( fn) 简写 $(fn) 可以使用多次。
JQuery 总结(1) 选择器的使用相关推荐
- 转:初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
- jQuery九类选择器
jQuery选择器基本选择器 #id/标签名/样式名/选择器A,选择器B jQuery层次选择器 *form input:查询form下所有input元素,含有后代关系 form>input:查 ...
- jq查找字段忽略html标签,jquery内容过滤选择器有哪些?
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text).:empty .:has(seletor) .:paren ...
- jquery常见的选择器
jquery常见的选择器 具体参考官方API:http://jquery.cuishifeng.cn/ 1. 基本选择器 1.通配符选择器 * 用于选择所有元素2.元素选择器 选择文档的元素 如htm ...
- 重磅推荐12款jQuery编写的选择器
我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器. 这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到.所以我决定写下 ...
- Jquery有哪些选择器
http://zhidao.baidu.com/link?url=qYC_qYA1G6dAgWcv1EVwDQyQrXQnVotFZwqoM4RK3O16EakTTnQnCWuCMCIWV33iGaP ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- jQuery中,选择器既匹配开头又匹配结尾
jQuery中,选择器既匹配开头又匹配结尾的方法: 1 [attr^=val]attr$=val 2 [attr^=val][attr$=val] 转载于:https://www.cnblogs.co ...
- js层级选择框样式_【JavaWeb】85:jQuery的各种选择器
今天是刘小爱自学Java的第85天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 选择器的作用是什么? 可以快速准确地定位我们所需要的标签. 刚学CSS的时候,觉得CSS选择器也太多了吧,直到 ...
- jQuery基本过滤选择器
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
最新文章
- Github 树形菜单插件
- mysql check exist_mysql – 使用多个EXIST进行查询
- 京东横刀,堵了拼多多“升级”的路
- dnd 辅助 android,Easy DND
- 第13步 用户模块前端(Admin)
- 用Java编写Hadoop MapReduce任务
- 160 - 48 DueList.3
- python内置的集成开发工具是什么_python内置的集成开发工具是什么_后端开发
- 计算机和单片机概述,微机与单片机概述课件.ppt
- jQuery Mobile中列表listview(ol、ul)的data-*选项
- FFmpeg总结(十四)FFmpeg如何解析直播点播m3u8
- 斗地主系列之牌型判断
- win10无限重启服务器,Win10 1909系统解决电脑无限重启的方法
- 手术麻醉信息管理系统源码,生成规范麻醉文书,自动信息采集
- 一篇高中生都能看懂的MySQL入门博客(长文)
- wordexpansion包 | 新增词向量法构建领域词典
- 猿团科技的加入为成都天府软件园注入年轻的活力
- LLT-发现股市中的“大浪”
- 使用C#解逻辑题:小王、小张、小赵三个人是好朋友,他们中间其中一个人下海经商,一个人考上了重点大学,一个人参军了。此外他们还知道以下条件:小赵的年龄比士兵的大;大学生的年龄比小张小;小王的年龄和大学生
- All in One RapidShare Pack 3.0
热门文章
- DALSA线阵CCD相机开发 之 opencv读取图片
- 以太坊开发实战:通过truffle-contract与智能合约交互
- 重磅 | 2017年全球最聪明公司排行榜TOP50,哪9家中国公司上榜?
- “人工智能大脑”跳槽记:吴恩达所理解的智能
- 谢百三:救市后股民应牢记教训?
- 白话Elasticsearch67-不随意调节jvm和thread pool的原因jvm和服务器内存分配的最佳实践
- Spring-AOP 自动创建代理之BeanNameAutoProxyCreator
- java品酒会,我学 rxjava 2(3)- 热发射
- js base_64 解密
- python 计算算术平方根