前端笔记----jquery入门知识点总结
一、jquery的加载方法
- $(document).ready(function(){js代码});
- $(function(){js代码});(一般使用这个);
注意点1:使用jquery必须先导入函数库文件,使用一个单独的script标签,结束代码另起一行script。
<script src="./jquery-1.12.4.js"></script>
<script>js的代码</script>
注意点2:在加载完毕后需要判断是否加载成功,一般使用length属性判断输出,如果不成功,length输出0;成功输出非0.
<script>
$(function () {
$div = $(".box");
console.log($Div.length);
})
</script>
二、jquery选择器,获取标签
说明:选择器和css选择器的写法相同。
- 选择元素:
$(document) //选择整个文档对象
$('li') //标签选择元素
$('#myId') //通过id选择元素
$('.myClass') // 通过class属性选择
$('input[name=first]') // 选择name属性等于first的input元素,通过行内属性和标签结合选择
$('#ul1 li span') //层级选择
- 修饰过滤
$('ul li:first') //选择ul元素下的第一个li
$('ul li:odd') //选择ul元素下的li的奇数行
$('ul li:eq(2)') //选择ul元素下的第3个li
$('ul li:gt(2)') // 选择ul元素下的第三个之后的li
$('ul li:lt(2)') // 选择ul元素下的第三个之前的li,不包括第三个
$('div:visible') //选择可见的div元素
- 函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择页面中第1个div元素
$('div').eq(5); //选择角标是5的div元素
- 选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('div'); //选择离div最近的那个div父元素
$('div').parent(); //选择div的一级父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的所有元素
三、jquery的动画animate方法分析
- 使用方法:
$('#div1').animate({
"width":300,
"height":300
},1000,'swing',function(){
alert('done!');
});
- 参数分析:
- 第一个参数设置需要变化的属性,一般用来设置与尺寸相关的属性变化,如果改变的是颜色需要额外引入jquery.color的库。
注意1:属性名必须添加引号,多个属性用逗号隔开值设置如上,可以是300,"300","300px",程序可以识别。
第二个参数代表动画的时间,以毫秒为单位。
第三个参数为运动的方式,"swing"表示渐变,先慢后快,"linear"代表匀速运动。
第四个参数表示动画执行完毕后需要执行的函数,可以不写这个参数。
注意2:如果只写第一个参数,则默认500ms,匀速运动,没有执行后动作。
扩展:点击按钮返回顶部页面的通用方法
$("html,body").animate({
"scrollTop":0
});
四、绑定点击事件click
- 语法:
$('#btn1').click(function(){});
说明:参数可以是匿名函数,也可以是命名函数;但如果需要传参,则必须使用匿名函数。
内部:使用$(this)代表当前点击的这个元素,如果使用this则是原生的对象。
几乎所有的元素类型都可以使用click事件,点击触发,不一定是a、input标签。
五、页面滚动事件
- 语法
$(window).scroll(function(){
......
})
与之相关的有两个常用的获取滚动距离的方法:
$(document).scrollTop(); //获取距离文档顶部的距离
$(document).scrollLeft();//获取距离文档左边的距离
注意:滚动事件只有在文档的高度或宽度大于窗口的宽高时才会生效。
六、操作属性
- 普通样式:
// 获取div的样式
$("div").css("width"); //获取单个样式
$("div").css(["width","height"]);
//获取多个样式,得到一个集合
//设置div的样式
$("div").css("width","30px");
$("div").css({fontSize:"30px",color:"red"});
$(function () {
var $div = $(".box").css("width", function (index,width) {
console.log(index,width);
return 500; //返回设置的宽度
// index代表div的角标,width参数为获取原来的宽度
});
})
注意点1:设置样式时,如果只有一个样式,用逗号隔开,不是冒号;当多个样式设置时才用冒号。
注意点2:选择器获取的是一个选择集,那么获取到的样式为第一个标签的样式。
操作类名:
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
注意:addClass()方法中的括号内直接写类名,不再是选择样式。
操作html标签
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<div>xxx</div>');
注意:取出时会将这个标签下的所有的html内容输出,包括标签本身。
只取文本内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('添加文字');
注意:设置文本内容时,加入标签是没有作用的,标签会被当做文本进行解析。
设置行内属性
// 取出按钮的值
var $value = $('input').attr('value');
// 设置按钮的值
$('input').attr({ "value":"按钮" });
// 取出图片的地址
var $src = $('#img').prop('src');
// 设置图片的地址和alt属性
$('#img').prop({src: "test.jpg", alt: "" });
注意:以上attr方法和prop方法使用方式一样;但是attr可以获取系统不存在的自定义的属性,而prop获取不到;所有的属性需要用引号包裹,否则报错。
操作尺寸
- 获取元素尺寸
$("div").width() // 获取元素width
$("div").height() //获取元素height
$("div").innerWidth() //获取包括padding的width
$("div").innerHeight() //获取包括padding的height
$("div").outerWidth() //包括padding和border的width
$("div").outerHeight()//包括padding和border的height
$("div").outerWidth(true)//包括padding和border以及margin的width
$("div").outerHeight(true)//包括padding和border以及margin的height
- 获取浏览器可视区的宽高
$(window).width();
$(window).height();
- 获取页面文档的宽度高度
$(document).width();
$(document).height();
- 获取元素相对页面的绝对位置
var $n1 = $("div").offset();
$left = $n1.left; # 获取相对页面左边的距离
$top = $n1.top; # 获取相对页面上边的距离
- 获取元素相对父类的绝对位置
var $n1 = $("div").offsetParent();
$left = $n1.left; # 获取相对父类左边的距离
$top = $n1.top; # 获取相对父类上边的距离
七、常用的特殊效果(动画)
- 淡入、淡出和切换淡入淡出
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
}); //淡入,事件1秒,渐变,参数和animate相仿
fadeOut() 淡出
fadeToggle() 切换淡入淡出
- 参数:
- 第一个参数代表动画的事件,单位为ms;
- 第二个参数表示动画的方式,"swing"表示渐变,先慢后快,"linear"代表匀速运动。
- 第三个参数表示动画完成后执行的函数。
注意:下面的动画方法和这里的参数一样。
- 隐藏、显示和切换
hide() 隐藏元素
show() 显示元素
toggle() 切换显示状态,参数和上面相同
- 展开、卷起和切换
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 展开和卷起切换
说明:以上的效果一般使用在点击事件中。
八、循环
- 语法:
$('div').each(function(i,j){
...
})
说明:当一次获取了多个div时,如果需要对每个元素进行不同的有规律的操作,使用each方法,内部用$(this)代表循环到的那个元素。
- 默认参数
循环方法中的function匿名函数中携带了两个默认参数,如上代码,i代表当前div的角标值,j代表当前div元素本身;这两个参数可以用任何变量表示。
- 扩展:
each循环和annimate动画嵌套不能改变颜色,如下:
$div.each(function (i,j) {
$(this).animate({
"background":"blue",
});
});
说明:该代码欲要实现每个div背景色逐个变蓝,实际不会起任何的作用;但对于宽高等属性是起作用的。
九、this关键字
$lis.click(function () {
//此时的$(this)代表$lis选择集下的当前点击的$lis
$(this).prevAll().each(function () {
//$(this)代表点击的$lis.prevAll(),this代表的元素发生了改变
$(this).animate({
"left": 21 * $(this).index(),
})
})
})
总结:this 永远代表当前触发事件的那个对象。
- 作者:天宇之游
- 出处:http://www.cnblogs.com/cwp-bg/
- 本文版权归作者和博客园共有,欢迎转载、交流,但未经作者同意必须保留此段声明,且在文章明显位置给出原文链接。
前端笔记----jquery入门知识点总结的更多相关文章
- 前端笔记----jquery入门知识点总结 (转)
http://www.cnblogs.com/cwp-bg/p/7633623.html 一.jquery的加载方法 $(document).ready(function(){js代码}); $(fu ...
- jquery入门知识点总结(转)
一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...
- 前端笔记-jquery
一.什么是jquery 1.jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team 2.jQuery是继prototype之后又一个优秀的 ...
- jQuery入门知识点
<精通ASP.NET MVC3框架>第20章 1.jQuery文件jquery-1.5.1.js:jquey核心库常规版jquery-1.5.1.min.js:jquery核心库最小化版j ...
- 前端笔记知识点整合之JavaScript(三)关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- C/C++编程笔记:C语言入门知识点(三),请收藏C语言最全笔记!
今天我们继续来学习C语言的入门知识点,第一课:C/C++编程笔记:C语言入门知识点(二),请收藏C语言最全笔记! 21. 输入 & 输出 当我们提到输入时,这意味着要向程序填充一些数据.输入可 ...
- C/C++编程笔记:C语言入门知识点(二),请收藏C语言最全笔记!
今天我们继续来学习C语言的入门知识点 11. 作用域规则 任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问.C 语言中有三个地方可以声明变量: 在函数或块内部的局部变量 ...
随机推荐
- 201521123032 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 在课堂上在老师 ...
- 201521123067 《Java程序设计》第7周学习总结
201521123067 <Java程序设计>第7周学习总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 Q1.ArrayList代码分析 ...
- 201521123015 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- 201521123092《java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- 201521123015 《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? IP地址不同 ...
- linux crontab详解
服务的启动和停止 cron服务是linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond ...
- MySQL集群(一)之主从复制
前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...
- delphi xe 3的EhLib 9.0 Build 9.0.033 Full Source安装
1.打开项目文件 2.全选 3.编译和buil 4.添加路径
- Maven第二篇【Idea下使用Maven】
详情可参照详细的Maven教程-Idea环境下 值得追加的是:在修改web.xml路径的时候,那篇博文并没有给出绝对的路径-这里可能有些人不知道怎么写.我给出来参考 X:\Users\ozc\Desk ...
- [mysql] ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES).
用mysql -u root -p显示ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YE ...