JQurey
js的类库,对传统的js进行了封装
js常用的框架:
JQuery(小巧用于互联网),ExtJS(大多用于局域网),DWR,Prototype...
JQuery的语法
$ 相当于jq的一个对象
$(function(){});相当于window.onload = function(){}
onload只能执行一次 $可以执行多次,效率更高:onload是等页面加载完成后执行该方法,只有最后一个会生效
jq的$(function(){})是等dom树绘制完成后就执行,
因此$(function(){})比window.onload = function(){}优先执行
$(document).ready(function(){})等价于$(function(){})
将jq($d1)对象转换成js对象
方式1:$d1[0],
方式2:$d1.get(0);
js(d1)转jq对象:
方式1:$(d1)
jq的显示和隐藏的操作
jq的效果操作
show();
1.使用jq对象.show();
2.jq对象.show("slow"); slow normal fast 慢,正常,快;
3.jq对象.show(毫秒值);1000 表示整个显示过程花1秒;
4.jq对象.show(快慢,函数);
hide();
slideDown();向下滑动
slideUp();向上滑动
fadeIn();淡入
fadeOut();淡出
以上与show相同
animate(); 自定义动画,
toggle(function1,..2..3);里面可以放很多函数,单击一下就切换一个
hover()鼠标移动切换事件
jq的基本选择器:
id选择器
用法:$("#id")
类选择器
$(".className")
元素选择器
$("div")
通配符选择器
$("*")所有元素
并列选择器
$("选择器1,选择器2,...")
$("#two,span,.mini") 选择器是或的关系
层级选择器
后代选择器 空格
$("body div")
子元素选择器 > $("div>span") 找这个div中第一层级的span
下一个元素 + 后面的同辈的下一个元素
兄弟元素 ~ 后面的同辈的所有元素
基本过滤选择器:
第一个子元素
选择ID为three的第一个子div元素:$("#three div:first")
选择ID为three的最后一个子div元素:$("#three div:last")
选择所有div中的奇数div:$("div:odd")
选择所有div中的偶数div:$("div:even")
选择ID为three的第二个子div元素:$("#three div:eq(1)") 从0开始
比多少大$("#three div:gt(1)")
比多少小$("#three div:lt(1)")
内容选择器:
:contains(text) 文本包含
$("div:contains('1')")
:empty 文本为空的
:has(selector) 有某一个内容
:parent 自己有子元素的
属性选择器
[attribute] 查找所有含有某个属性的元素
$("div[id]")有id属性的div
[attribute=value] 属性值等于xxx的
[attribute!=value] 属性值不等于xxx的
[attribute^=value] 以某些属性值开始的
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 包含某些属性值的元素
[attrSel1][attrSel2][attrSelN] 多属性
表单选择器:
:input 所有表单元素(包括input, textarea, select 和 button) ;$("input") input标签
:text 文本框
:password 密码文本框
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:enabled
:disabled
:checked
:selected
jq中添加和移除样式
可以使用css()方法
$("p").css("color");
$("p").css("color":red,...);设置多个样式 json的数据格式
addClass()添加样式 一个标签允许有多个class
removeClass()移除样式
toggleClass("dd")第一次添加, 第二次移除
设置标签体
html();
对属性的基本操作:
attr();
使用方法1:$("").attr("src"); 给某个标签添加属性
方法2:$("").attr("src","xxx.jpg");给某个标签添加属性并赋值
方法3:$("").attr("src":"xxx.jpg","width":"100%");给某个标签添加属性并赋值
removeAttr();
prop();新版本提供的
使用方法1:$("").prop("src"); 给某个标签添加属性
方法2:$("").prop("src","xxx.jpg");给某个标签添加属性并赋值
方法3:$("").prop("src":"xxx.jpg","width":"100%");给某个标签添加属性并赋值
removeProp();
jqDOM操作
append(content|fn) 在某个元素后添加内容 jq1.append(jq2)前面的加一个后面的
appendTo(content) 将某个元素添加到另一个元素中 jq1.appendTo(jq2)前面的追加到后面里面去
$("p").appendTo("#d1");将p标签中的文本添加到id为d1的标签中
remove();移除某个元素
$("p").html("bbbbbbbbbbb");将p标签中原有的内容替换成bbbbbbbbbbb(覆盖掉)
jq的遍历方式一:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
方式二:
$("数组名").each(function(i, n){
});
$("数组名").each(function(){
this(this是对应的元素)
});
012是数组 function是循环操作,i是索引,n相当于是get(i)
jq对象象要获得值可以用 $("").val();如果括号里面有值就是在赋值,如果没有值就是在取值
jq的事件就是js中的事件去掉on然后变成方法
jq中的常用事件
jq的事件切换
(不用了已经)toggle();--单击事件的切换
(重要)hover(); --鼠标悬停的切换
jQuery的查找:
find();
$(this).parent().find(".formtips").remove();
删除样式为formtips的子标签
parent();
children();
事件的处理:
bind();
$("p").bind("click", function(){
alert( $(this).text() );
});
相当于 $("p").click()
trigger();会执行浏览器默认的动作(同名的)
triggerHandler(); 不会执行默认的事件
is()
triggerHandler:
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
|
|
收藏
淘帖
踩
期待更新............
