前端开发大杂烩

JQ

2017-06-13  本文已影响0人  小丶枫

$(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元素

上一篇 下一篇

猜你喜欢

热点阅读