1:$(document).ready()function{}和window.onload()的区别。
1:$(document).ready()function{} 该方法等到Dom结构绘制完毕后可以执行,不必等到加载完毕。
window.onload(){} 必需等到图片所有元素加载完毕后才能执行。
2:window.onload(){}不能写多个,而$(document).ready(){}可以写多个。
3:$(document).ready(){}的简化写法 $(function(){});
2:简述三种选择器
1:$("#id")根据Id来查找。
2:$(".class")根据样式来查找。
3:$("p)根据标签来查找。
3:Jquery选择器对元素或单个元素进行操作。
1:根据父节点来通过选择器查找子节点
$("P") 查找所有P标签
$("p.intro") 查找所有p元素的class属性为intro的标签。
$("p#demo") 查找所有p元素id为demo的标签。
2:属性选择器 []XPath 表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有href属性等于#的元素。
$("[href$='.jpg']")选取所有href属性以.jpg结尾的元素。
$("div#demo.intro")选取div元素中,id为demo的div元素的class属性为intro
$("ul li:first") 每个ul的第一个li标签。
$("input[type='text']"表示type为text的标签
4:Jquery事件
1:Jquery命名冲突
Jquery中以$作为jQuery的简介
如果想替换$则调用 var jq=jQuery.noConflict();使用jq来代替$.
2: 1:$(document).ready(function); 将函数绑定到文档就绪事件 当文档加载完毕。
2:$(selector).click(function);
3:$(selector).dbclick(function);
4:$(selector).focus(fucntion);
5:$(selector).mouseover(function);
5:Jquery隐藏/显示
Jquery以hide() show() 来隐藏显示。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选speed参数来控制速度,可取slow,fast,或毫秒。
可选callback参数是显示隐藏后执行的函数名称。 可以是匿名函数也可以是函数名。
toggle()函数,隐藏的时候显示,显示的时候隐藏。
6:Jquery获得内容和属性
text()-设置返回元素的文本内容。
html()-设置返回所选元素的内容(包含HTML标签).
val()-返回字段的值。
获取元素的属性
attr()方法用于获取属性值,同时也可以设置属性值。
如$("#w3s").attr("href");
设置属性值 $("#w3s").attr({'href':'www.baidu.com','title':'百度一下'});
text() html() val()的回调函数
回调函数有两个函数,被跌选元素列表中当前元素的下标,以级原始(旧值),然后以函数新值返回字符串。
$("#text").text(function(i,oldtext){
return "oldtext:"+oldtext+"new Html: hello <br> world<br> index:"+i;});
7:添加元素
append()-在被选元素结尾插入内容。
prepend()-在被选元素开头插入内容。
after()-在被选元素之后插入内容。 《 -------- 块级插入
before()-在被选元素之前插入内容。
//以HTML形式创建元素
var temp1="<p>Text</p>";
//以Jquery形式插入元素
var temp2=$("<p></p>").text("Text.");
var temp3=document.createElement("p");
temp3.innerHTML="Text.";
$("button").after(temp1,temp2,temp3);
8:删除元素
remove()删除被选元素和其子元素。
empty() 删除其子元素。
remove(".class") 带一个参数,允许对被删元素过滤。
9:Jquery操作Css
1:添加一个Css样式
addClss()向被选元素添加一个或多个类
$('div').addClass("blue"); $('div').addClass("blue demo");
2:去除一个样式也是可以删除多个样式。
$('div').removeClass("blue");
3:toggleClass() 方法 添加或删除某个class 有则删除 没有则添加
4:css()方法返回被选元素一个或多个样式属性。
css("propertyname");
如$("p").css("background-color");
css("propertyname","value");设置指定Css的样式属性。
如$("p").css("background-color","yellow");
设置多个Css样式属性
$("p").css({"background-color":"yellow","font-size":"40px"});
10:Jquery操作长度
1:得到长度和宽度。 (不包括内边距、边框或外边距)。
$("#div2").width(); $("#div2").height();添加元素是设置高度和宽度如$("#div2").width(500) $("#div1").height(500);
2: innerWidth()返回元素的宽度(包括内边距)元素的高度(包括内边距)
$("#div2).innerWidth() 和$("#div2").innerHeight();
3: outerWidth()和outerHeight()返回元素的宽度和高度(包括内边距和边框)如outerWidth(true)返回的是,
即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
4:$(document).width()得到的是(HTML文档的宽度和高度)
$(window).width()得到的是浏览器窗口的宽度和高度。
11:Jquery的遍历
Jquery遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。
以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
特点:父节点 兄弟节点,子节点。
1:遍历-祖先
parent()方法返回被选元素的直接父亲,只会向上一级Dom()书遍历。
$("span").parent();
parents()方法返回被选元素的所有祖先元素(上级元素)直到Html文档。
$("span").parents();
parents()可以带一个参数如 $("span").parents("ul");span的祖先并且是ul元素
parentsUntil()方法返回介于两个给定的元素之间的所有祖先元素。
$("span").parentsUntil("div")返回span到div之间的元素。
2:遍历-后代(后代指的是 子 孙,曾孙等)
children()返回被选元素的所有子元素,只对下一级dom进行操作。
$("div).children();
过滤子元素
$("div").children("p.1") 返回类名为1的p元素并且是子元素。
find()返回的是被选元素的后代元素,直到最后一个。
$("div").find("span") 查找div元素的所有span元素后代。
$("div").find("*"); 返回所有的后带元素。
3:遍历-同胞(同胞拥有相同的父元素),遍历元素的同胞元素。
遍历所有的兄弟节点。
$("p").siblings();返回被选元素所有的兄弟元素。
$("p").siblings("p")返回属于h2的兄弟元素的所有<p>元素。
返回下一个兄弟元素 next().
$("p").next();
nextAll()方法返回所有的下一个兄弟元素。
nextUntil()方法返回介于两个元素之间的同胞元素
$("p").nextUntil("h6") 返回的是p到h6之间的元素。
prev()返回上一个兄弟节点 prevAll()返回所有的上一个兄弟节点 prevUntil()返回介于两个
元素之间的兄弟节点(向上).
4:$.each遍历
1:遍历被选中元素
$(selector).each(function(index,element){
index选择当前位置 element当前元素
});
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
$(li).each(function(index,element){ alert(index)//0-1-2 alert($(element).html()) coffee milk soda this }
2:Js对象转换为Jquery对象
var ele= $(element) js对象变为了Jquery
Jquery对象转换为js对象
var $v =$("#v") ; //jQuery对象
var v=$v[0]; //js对象
2:遍历数组
1:var arr=['nba','cba','cuba','ufc'];
$.each(arr, function(){ alert(this); });
$.each(arr,function(index,element){
alert(arr[index]) alert(index) alert(this)
});
3:遍历Json数据
var obj=['china':'中国','usa':'美国','rusiaa':'俄罗斯'];
$.each(obj,function(key,value){
alert(obj[key]);
});
12:Jquery()的过滤
三个最基本的过滤元素方法 first(),last(),eq()基于在一个元素中的位置来选一个特定元素。
filter()和not()允许选取匹配和不匹配某项指定的标准元素。
first()方法返回被选元素的首个元素。$("div p").first().
last()方法返回被选元素的最后一个元素 $("div p").last();
eq()方法返回被选元素中带有索引号 01 $("div p").eq(2) div中第三个p标签。
fliter()方法不匹配的元素会从集合中删除,匹配的会被返回 $("p").fliter(".demo");
not()方法返回所有不匹配的元素 $("p").not(".intro");
13:事件监听
Jquery事件监听
$(selector).bind(event,data,function,map);
event 必须 ,规定添加到元素的一个或多个事件,由空格分隔。 如click onmouseout onmouseover事件
data 可选,规定传递到函数的额外参数。
function 必需,规定当事件发生是的函数。要执行的方法
map 规定事件映射({event:function,event:function,...})包含要添加的事件和事件发生时要执行的函数。
1:添加监听事件
$('input[type="text"]').bind("click",function(){
// alert("444");
$(this).css("border","");
$(this).next().hide();
});
2:传递参数
$('p').bind("click",{msg:"你刚点击了"},handlername);
function handlername(e){
alert(e.data.msg); e.data 得到数据
}
3:事件映射 使用事件映射,向被选元素添加事件。
$('button').bind({
click:function(){alert("333")'},
onmouseout:function(){$(body).css("background-color","red")},
onmouseout:function(){$(body).cdd("background-color","white")}});
Js事件监听
js监听是通过addEventListener()方法来实现
addEventListener(event,function,useCapture);
event:事件名 如click mouseover 不要使用 on前缀。
function 可以是一个方法,也可以是一个函数名,可以传递参数。
useCapture 事件句柄是在 True(捕获阶段执行) false(冒泡阶段执行)。可选参数
js去除事件监听 removeEventListener();
removeEventListener(event, function, useCapture)
event:事件名。
function:要去除的方法。
useCapture:指定移除事件句柄的阶段 true - 事件句柄在捕获阶段移除 false- 默认。事件句柄在冒泡阶段移除.
14:Json数据的加载和转换
1:eval('('+data+')');可以将Json字符串转换位Json数据。 //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
2:JSON.parse(string)将Sring转换成Json对象。
3:JSON.stringify(obj)将JSON对象转换成String对象。