前端笔记----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 语言中有三个地方可以声明变量: 在函数或块内部的局部变量 ...
随机推荐
- Java学习6——基本数据类型及其转换
Java常量: Java的常量值用字符串表示,区分不同的数据类型 整型常量123.浮点型常量3.14.字符常量'a'.逻辑常量true.字符串常量"helloworld". ps: ...
- 201521123061 《Java程序设计》第七周学习总结
201521123061 <Java程序设计>第七周学习总结 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 贴上源 ...
- 201521123030《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 控制可见性的4个访问修饰符 private -- 仅对本类可见 public -- 对所有类 ...
- 201521123003《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- PTA分享码-Java
主要用于Java语法练习,非竞赛类题目. 1. Java入门 959dbf0b7729daa61d379ec95fb8ddb0 2. Java基本语法 23bd8870e ...
- SublimeTest3设置【中文乱码】
SublimeTest出现乱码! 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码 import urllib.request,os; pf = ' ...
- String ua = request.getHeader("user-agent")---ua值为null
最近在修改错误日志,发现总报空指针,追踪代码发现这个ua的值有时候会为null,上网查了半天也无果,按常理说ua的值不可能为null,俩小时没找到原因,只是将ua判null了一下,记录一下,如果有大虾 ...
- angular smart-table组件如何定制化之初步研究
table表运用在后台管理用得频繁,一般bootstrap的class="table"就能满足样式需求以及分页需求,但是每个产品经理需求不一样,比如说分页:bootstrap分页实 ...
- Angular2开发拙见
本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...
- 两句话动态修改table数据并提交到后台
//为所有的input 添加click事件,我将对象的id放入到name属性中,行数放入到alt属性中 $("input").click(function(obj){ //获得当前 ...