按以下几类分解
一、选择器(定位元素方法)方法
$("各种类型选择器")
二、筛选方法
$("xxx").find()等
三、对DOM元素的增、删、改方法
如append/remove/html/clone等
四、对DOM元素属性的增、删、改方法
如attr/css/val等方法
五、对集合的处理方法
如json/each等方法
六、对事件的绑定方法
如click/bind/live/toggle等方法
七、其它常用方法
如ajax等
animate()
对被选元素应用“自定义”的动画
clearQueue()
对被选元素移除所有排队的函数(仍未运行的)
delay()
对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()
运行被选元素的下一个排队函数
fadeIn()
逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut()
逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo()
把被选元素逐渐改变至给定的不透明度
hide()
隐藏被选的元素
queue()
显示被选元素的排队函数
show()
显示被选的元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
对被选元素进行滑动隐藏和滑动显示的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止在被选元素上运行动画
toggle()
对被选元素进行隐藏和显示的切换
总共有三种引用方式。
1、最常用的,引入样式表,在样式表中编写样式,引入方式如下:
<link href="css/style.css" rel="stylesheet" type="text/css">
2、在Html头部用<style></style>;包起来,在这里面编写样式:
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3、在标签里面直接编写行内样式。
<div style="color: #333"><div>
当然还有一种方式是用JS直接更改或者赋值给某个标签,但是其实是属于第三种的范围的。
引用
写文章时,有意引用成语、诗句、格言、典故等, 以表达自己想要表达的思想感情,说明自己对新问题、新道理的见解,这种修辞手法叫引用。
属性: 获得标签:$("#id")获得标签内的代码:.html()获得标签内的文本:.text()修改标签内的代码:.html("内容");修改标签内的文本:.html("内容");获得标签属性:.attr("属性");修改标签属性:attr("属性","属性值");添加样式:addClass("样式名");动态切换样式:toggleClass("样式名");获取样式:css添加元素:append("元素");移去元素:.remove();清空节点: .empty();获取第二个li节点: var $li=$("ul li:eq(1)");获取第二个li节点的文本内容: var li_txt=$方法:一:插入节点:append() 向每个匹配的元素文本内部的后面追加内容eg:我想说: 代码: $("p").append("你好");结果为:我想说: 你好appendto() 将所有的匹配的元素追加到指定的元素中。
实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B追加到A中,而是将A追加到B文本的后面中。eg:我想说: 代码: $("你好").appendTo("p");结果为:我想说: 你好prepend() 向每个匹配的元素文本的内部前置内容。
eg:我想说: 代码: $("p").prepend("你好");结果为: 你好我想说:prependto() 将所有的匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B前置到A中,而是将A前置到B中eg:我想说: 代码: $("你好").prependto("p");结果为: 你好我想说:after() 向每个匹配的元素之后插入内容 。
eg:我想说: 代码: $("p").after("你好");结果为:我想说: 你好insertAfter 将所有的匹配的元素插入到指定的元素后面。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B插入到A后面,而是将A插入到B后面。
eg:我想说: 代码: $("你好").after("p");结果为:我想说: 你好before() 在每个匹配的元素之前插入内容eg:我想说: 代码: $("你好").after("p");结果为:我想说: 你好insertBefore():将A标签插入到B标签的前面二:删除:①remove 该节点所包含的所有的后代节点将同时被删除 也可以通过参数来选择②empty 清空节点,它能清空元素中的所有后代节点三:替换节点:①replaceWith() 作用是将所有匹配的元素都替换成指定的HTML或DOM元素②replaceAll() 四:包裹节点:①warp() 作用是是将所有元素进行单独包裹②warpAll() 作用元素的是所有匹配的元素用一个元素来包裹③warpinner() 作用是将每一个的子内容(包括文本节点)用其他结构化的标记包裹起来五:设置和获取HTML、文本值1、html():2、text3、val六:遍历节点1、children(): 取得匹配元素的子元素2、next():取得匹配元素后面紧邻的同辈元素3、prev():取得匹配元素前面紧邻的同辈元素4、siblings():取得匹配元素前后所有的同辈元素5、closest():取得最近的匹配元素七:css-domcss 获取样式的属性offset()样式操作:1:获取样式和设置样式 attreg:你最喜欢的水果是? 获取样式: var p_class=$("p").attr("class");设置样式:$("p").attr("class","high");2:追加样式 addClass追加样式: $("input:eq(2)").click(function(){$("p".addClass("another"))})☆在css中有以下规定:①如果给一个元素添加了多个class值,那么就相当于合并了他们的样式②如果不同的class设置了同一样式,则后者覆盖前者addClass attr对同一个网页元素进行操作 test test 第一次使用 $.addClass("high"); $.attr("class","high");第一次结果 test test 再次使用 $.addClass("another"); $.attr("class","another");最终结果 test test 3:移除样式 removeClasstest 移除一个:$.removeClass("high");移除二个:$.removeClass("high").removeClass("another");==$.removeClass("high another")移除全部:$.removeClass();4:切换样式 toggle5:判断是否含有摸个样式 hasClass可以用来判断元素中是否含有某个class,如果有返回true否则返回false。
1、JQuery的核心的一些方法 each(callback) '就像循环$("Element").length; '元素的个数,是个属性$("Element").size(); '也是元素的个数,不过带括号是个方法$("Element").get(); '某个元素在页面中的集合,以数组的形式存储$("Element").get(index); '功能和上面的相同,index表示第几个元素,数组的下标$("Element").get().reverse(); '把得到的数组方向$("Element1").index($("Element2")); '元素2在元素1中的索引值是。
2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)$("*") ‘表示获取所有对象 但是我至今没这样用过$("#XXX") '获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用$("input[name='username']") 获得input标签中name='userName'的元素对象 常用$(".abc") ' 获得样式class的名字是.abc的元素对象 常用$("div") ' 标签选择器 选择所有的div元素 常用$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素3、层级元素获取$("Element1 Element2 Element3 。.") '前面父级 后面是子集$("div > p") '获取div下面的所有的 p元素$("div + p") 'div元素后面的第一个 p元素$("div ~ p") 'div后面的所有的 p元素4、简单对象获取$("Element:first") 'HTML页面中某类元素的第一个元素$("Element:last") 'HTML页面中某类元素的最后一个元素$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框$("Element:even") '获得偶数行$("Element:odd“)'获得奇数行$("Element:eq(index)") '取得一个给定的索引值$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素5、内容对象的获取和对象可见性$("Element:contains(text)") '元素中是否包含text文本内容$('Element:empty") '获得元素不包含子元素或文本的$("Element:partnt") '获得元素包含子元素或文本的$("Element:has(selector)") '是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素$("Element:hidden") '选择所有可见元素$("Element:visible") '选择所有不可见元素6、其他对象获取方法$("Element[id]") '所有带有ID属性的元素$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素$("Element[selector1][selector2][。
.]") '符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
蜀ICP备2020033479号-4 Copyright © 2016 学习鸟. 页面生成时间:2.950秒