JQ的学习

来源：互联网发布：国际数据公司收购编辑：程序博客网时间：2024/05/21 13:58

JQ学习-2015.12.07：
JQ是一个JS库，极大地简化了js的编程！
1、JQ库位于一个js文件中，其中包含了所有的JQ函数。
2、通过下面的标记将JQ添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
//注意JQ的引用一定在head部分！！！！
3、基础语法：
$(selector).action()
$定义了JQ
选择符（selector)"查询"和"查找"HTML元素
JQ的action执行对元素的操作！
示例：
$().hide() 隐藏元素
4、关键点是学习JQ选择器是如何准确的选取您希望应用效果的元素！
JQ选择器允许你通过标签名、属性名或内容对HTML元素进行选择，同时选择器也允许你对HTML元素组或者单个元素
进行选择


JQ学习-2015.12.08：
hide(speed,callback);
show(speed,callback);
toggle(speed,callback);
fadeIn(speed,callback);
fadeOut(speed,callback);
fadeTo();允许渐变为给定的不透明度（值介于0于1之间）；//这个在实验中没做出来？？、？？？？
slideDown()向下滑动的元素；
slideUp()向上滑动的元素；
slideToggle()切换；
animate()用于创建定义的动画:
animate({params},speed,callback);
｛params｝形成动画的CSS属性；//必须使用驼峰书写法；
也可以定义相对值：+=或者-=
stop();语法：$(selector).stop(stopAll,goToEnd);
stopAll:规定是否应该消除动画队列，默认false，仅停止当前的动画，允许任何排入队列的动画向后执行。
goToEnd:是否立即完成当前动画，默认false。
chaining链接技术：允许我们在相同的元素上执行多条JQ语句，一条接这一条；
例如：$("#divobj").css("backgroundColor","blue").slideUp(1000).slideDown(1000);

JQ学习-2015.12.09：
JQ--获得内容和属性
1、获得内容：text() //设置或返回所选元素的文本内容
html() //设置或返回所选元素的内容（包括HTML标签）
val() //设置或返回表单字段的值
2、获取属性：attr()
例如：$(选择器).attr(属性)；
3、设置值的方法：直接在括号中传入！！！
问题：：这个部分的回调函数部分没有搞懂！！？？？
4、通过JQ添加新的元素或者内容的四个方法：
append()
prepend()
after()
before()
5、JQ删除元素/内容
remove() //删除被选元素（及其子元素）；
empty() //从被选元素中删除子元素。
其中remove（）方法可以过滤被删除的元素：$(选择器1).remove(选择器2) //删除选择器2的具有选择器1的元素
6、JQ--获取并设置CSS类：
addClass() 可以规定多个类，类与类之间用空格隔开即可。
removeClass()
toggleClass()
css()
7、css()方法
设置或返回被选元素的一个或多个样式属性
返回css样式属性的值---语法：css("propertyname"); //一般返回首个匹配元素的属性值
例如：$("p").css("background-color");
设置指定的css属性---语法：css("propertyname","value"); //设置所有匹配元素的属性值！
设置多个指定的css属性---语法：css("propertyname":"value","propertyname":"value",....)
8、JQ尺寸
JQ提供多个处理尺寸的重要方法：
width() //设置或返回元素的宽度不包括内边距，边框或者外边距
height（）
innerWidth（） //设置或返回元素的宽度包括内边距!
innerHeight() //
outerWight() //包括内边距和边框
outerHeight()
outerWight(true)//返回元素的宽度包括内边距，边框和外边距！

JQ学习-2015.12.13:
JQ遍历：根据相对于其他元素的关系来查找或者获取HTML元素
1、通过JQ你能够向上遍历DOM树：
parent()
parents()
parentsuntil()

$(document).ready(function(){
$("span").parents("ul")
})

解释以上语句的意思

******************************************************************************************

2、通过JQ你能够向下遍历DOM树，以查找元素的后代
children() //返回被选元素的直接子元素，当然你也可以传入参数进行过滤对子元素的搜索
find() //返回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready(function(){
$("div").children("p.one")
});

解释以上语句的意思

*************************************************************************************************
3、通过JQ能够在DOM树中遍历元素的同胞元素
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
4、JQ过滤
三个最基本的方法是first(),last()和eq()
他们允许您基于其在一组元素中的位置来选择一个特定的元素
还有filter()和not()允许您匹配或者不匹配某项指定标准的元素
JQ first()方法返回被选元素的首个元素
$(document).ready(function(){
$("div p).first()
});

eq()方法返回带有指定索引号的元素
索引号从0开始，因此首个元素的索引号是0而不是1.下面的例子选取第二个<p>元素（索引号1）
$(document).ready(function(){
$("p").eq(1);
});
filter()方法允许你规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名"intro"的所有<p>元素；
$(document).ready(function(){
$("p").filter(".intro");})

not()方法返回不匹配标准的元素
下面的例子返回不带有类名"intro"的所有<p>元素；
$(document).ready(function(){
$("p").not(".intro");})

0 0