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 }
Jquery基础知识01
内容版权声明:除非注明,否则皆为本站原创文章。