JQ

$(document).ready(function(){代码表达式});文档加载完毕后执行JQ代码

l事件

$(“#id”).click(function(){代码表达式});点击事件

$(“#id”).focus(function(){代码表达式});获取焦点事件

$(“#id”).blur(function(){代码表达式});失去焦点事件

$(“#id”).mouseover(function(){代码表达式});鼠标悬停事件

$(“#id”).mouseout(function(){代码表达式});鼠标移出事件

$(“#id”).on();绑定事件

$(“#id”).hover();鼠标事件

$(“#id”).bind(“mouseentermouseleave”,handlerInOut);

$(“#id”).hover(handlerInOut);鼠标事件切换

$(“#id”).toggle();鼠标点击显示隐藏切换

$(“#id”).change();元素值发生改变时相应(textarea,select)

$(“#id”).focus();元素获取焦点时

$(“#id”).blur();元素失去焦点时

l获取内容

$(“#id”).text()返回所选元素的文本内容

$(“#id”).html()返回所选元素的内容(包括HTML标记)

$(“#id”).val()返回所选元素的表单字段的值

$(“#id”).attr(“src”)返回所属元素的属性值

l设置内容

$(“#id”).text(“文本”)设置文本内容

$(“#id”).html(“HTML”)设置HTML内容

$(“#id”).val(“值”)设置值

$(“#id”).attr(“href”,”http://www.baidu.com”)设置href

l设置多个属性值

$(“#id”).attr({

“href” : “http://www.baidu.com”,

“title” : “title”,

“src” : “src”

});

l添加元素

$(“#id”).append()在被选元素的结尾插入内容(直接在标签里面插入内容)

$(“#id”).prepend()在被选元素的开头插入内容(直接在标签里面插入内容)

$(“#id”).after()在被选元素之后插入内容(在标签后面插入内容)

$(“#id”).before()在被选元素之前插入内容(在标签后面插入内容)

l创建元素

Var txt1= $(“”).text(“Text”)JQ创建新元素

Var txt2= “

Text

”HTML创建新元素

Var txt3= Document.createElement(“p”)

Txt3.innertHTML=”Text”;DOM创建新元素

$(“#id”).append(txt1,txt2,txt3)追加元素

l删除元素

$(“#id”).remove()删除元素

$(“#id”).empty()删除被选元素的子元素

$(“p”).remove(“.p”)删除P标签下类名为P的元素

$(“img”).removeAttr(“src”)删除图像的src属性

l设置CSS类

$(“#id”).addClass()向所选元素添加一个或多个类

$(“#id”).removeClass()从被选元素删除一个或多个类

$(“#id”).css()返回被选元素样式属性

$(“#id”).toggleClass()对被选元素进行添加/删除类的切换操作

l尺寸

$(“#id”).width()设置或返回元素的宽度

$(“#id”).height()设置或返回元素的高度

$(“#id”).innerWidth()返回元素的宽度(含内边距)

$(“#id”).innerHeight()返回元素的高度(含内边距)

$(“#id”).outerWidth()返回元素的宽度(含内边距和边框和外边距)

$(“#id”).outerHeight()返回元素的高度(含内边距和边框和外边距)

l遍历

$(“#id”).parent()返回被选元素的直接父元素

$(“#id”).parents()返回被选元素的所有祖先元素

$(“#id”).parentsUntil()返回介于2个给定元素之间的所有祖先元素

$(“#id”).children()返回被选元素的直接子元素

$(“#id”).find()返回被选元素的所有后代元素

$(“#id”).siblings()返回被选元素的所有同胞元素

$(“#id”).next()返回被选元素的下一个同胞元素

$(“#id”).nextAll()返回被选元素的下面的所有同胞元素

$(“#id”).nextUntil()返回介于2个给定元素直接的所有同胞元素

$(“#id”).prev()返回被选元素的上一个同胞元素

$(“#id”).prevAll()返回被选元素的上面的所有同胞元素

$(“#id”).first()返回被选元素的首个元素

$(“#id”).last()返回被选元素的最后一个元素

$(“li”).eq()返回被选元素中带有指定索引号的元素

$(“p”).filter(类名或ID名)返回匹配的元素

$(“p”).not(类名或ID名)返回不匹配的元素

lAJAX

$(“#id”).load(url,callback函数)从服务器加载数据,并把数据放入被选元素中

$.get(url,callback函数)以GET方式从服务器上请求数据

$.post(url,data,callback函数)以POST方式从服务器上请求数据

$.getJSON(url,data,callback)以GET方式来加载远程JSON数据

$.ajax()把远程数据加载到XMLHttpRequest对象中

例子:

$.ajax({

url : “www.baidu.com”,

status : “success”

})

lJSON对象

Var obj = Eval(JSON对象)解析JSON对象数据

l选择器

$(“tr:odd”)查找表格的2,4,6行

$(“tr:add”)查找表格的1,3,5行

$(“form > input”)匹配表单中的所有子级input元素

$(“tr:eq(0)”)查找第一行

$(“tr:gt(0)”)查找比第一行大的行

$(“tr:lt(2)”)查找比第三行小的行

$(“:header”)匹配如h1,h2之类的标题元素

$(“td:empty”)查找所有不包含子元素或者文本的空元素

$(“div:has(p)”)匹配含有p元素的div元素

$(“td:parent”)查找所有含有子元素或者文本的td元素

$(“tr:hidden”)查找隐藏的tr

$(“input:hidden”)查找type为hidden的元素

$(“tr:visible”)查找所有可见的tr元素

$(“:checkbox”)查找所有复选框

$(“input:checked”)查找所有选中的复选框

l筛选

$(“div”).hasClass()检查当前元素是含有某个特定的类

$(“p”).slice(0,2)选择前2个P元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、基本选择器:#### A:$('li:first') //第一个元素B:$('li:last') //最后一个...
    贞贞姐阅读 3,919评论 5 9
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,904评论 0 3
  • 对jq能熟练运用后在回头发现,曾今的坑其实这两本书多多少少都能提到,当时知道有这两本好书,但是自己却没看,如今在回...
    coderLfy阅读 4,716评论 6 19
  • 如果可以 我想买马去南山 不骑 看它吃草 如果可以 我想栽一朵花 在你的肩头 人群中我一眼看到你 如果可以 我会酱...
    丹崖阅读 1,540评论 0 7

友情链接更多精彩内容