Jquery是一个优秀的js库,它简化了js的复杂操作,不需要关心浏览器的兼容问题,提供了大量实用方法。
Jquery的写法
方法函数化
链式操作
取值赋值合体]
$(“p”).html(); 取值
$(“p”).html(‘hello’); 赋值
(当一组元素的时候,取值是一组中的第一个,赋值是一组中的所有元素。)
Jq与js可以共存,不能混用
主要的筛选方法
has() not() filter()
next() prev() find() eq() index() attr() indexOf()
Attr() 对属性进行操作,给元素添加属性且赋值,或者取得某个属性的值。
$(“div”).attr(‘title’,’123’);
<div title=”123”></div>
Filter() 对一组元素进行筛选,过滤
满足条件的会被留下来
$(‘div’).filter(‘.box’).css(‘background’,’red’);
含有box类的div背景颜色会改变
Not() filter的反义词
$(‘div’).not(‘.box’).css(‘background’,’red’);
不含有box类的div背景颜色会改变
(filter和not是针对当前元素的,has是针对元素里面的内容的)
Has() 包含的意思
$(".box").has('#ul').css("background","#ccc");
$(“.box”).has(span).css(“background”,“red”);
Next() 找到当前元素的下一个兄弟节点
Prev() 找到当前元素的上一个兄弟节点
Find() 查找
$(‘div’).find(‘h2’).css(‘background’,’red’);
eq() 获得对应下标的元素
$(‘div’).find(‘h2’).eq(1).css(‘background’,’red);
Index(); 获得当前元素的索引。索引就是当前元素在所有兄弟节点中的位置
$(‘#h’).index();
编写选项卡
<
input type=
"submit" value=
"111">
<
input type=
"submit" value=
"222">
<
input type=
"submit" value=
"333">
<
div id=
"div">
<
div class=
"active">111</
div>
<
div>222</
div>
<
div>333</
div>
</
div>
<script>
$(function(){
$("input").click(function(){
var i=$(this).index();
$("#div div").eq(i).show().siblings().hide();
});
});
</script>
Jquery中常用的属性操作方法
addClass()
添加类名
$(‘div’).addClass(‘box2 box3’);
removeClass()
删除类名
$(‘div’).removeClass(‘box2 box3’);
width()
获取元素的宽度,不包含padding
Height()
获取元素的高度
innerWidth()
获取元素不包含变宽的宽度(包含padding)
outerWidth()
获取元素外的宽度,包含padding border
outerWidth(true) (包含padding,border,和margin)
节点操作常用方法
insertBefore() 插入到节点的前面(动词)剪切的功能
$(‘span’).insertBefore($(‘div’));
<span>1213</span>
<div>2345</div>
before() 节点的前面插入某元素(名词)
insertAfter() 插入到节点的后面(动词)(原生js中没有这个方法)
$(‘div’).insertAfter($(‘span’));
<span>1213</span>
<div>2345</div>
after() 节点的后面插入某元素(名词)
appendTo()
插入到节点内部所有子节点的后面(动词形式)
append() (名词形式)
prependTo()
插入到节点内部所有子节点的前面(动词形式)
prepend() (名词形式)
区别(后续操作不一样,)
$(‘span’).insertBefore($(‘div’)).css(‘background’,’red’);
$(‘div’).before($(‘span’)).css(‘background’,’red’);
remove() 删除节点
on()
$(‘div’).on(‘click mouseover’,function(){
Alert(123);
})
自定义事件,也可以写多个事件,来针对一个操作
$(‘div’).on({
‘click’:function(){
Alert(123);
},
‘mouseover’:function(){
Alert(456);
$(‘div’).off(‘mouseover’);
}
});
off() 关闭它的所有事件操作
scrollTop() 获取滚动条的滚动距离
$(document).click(function(){
Alert($(window).scrollTop());
})
弹窗(popup),动态创建
创建标签
关键点,弹框的位置,绝对定位,position : absolute;
Left: (窗口宽度 - 弹框宽度)/2;
Top: (窗口的高度 – 弹框的高度)/2 + 滚动条的高度;
监听窗口大小变化和滚动事件
$(window).on(‘resize scroll’,function(){
})
事件细节
Event对象,对事件细节进行操作
ev :兼容后的even对象
ev.pageX (相对于文档的)
ev.clientX (相对于可视区,可视区加上滚动条距离就是pageX)
ev.pageY (相对于文档的)
ev.clientY (相对于可视区的)
),可以记录鼠标的键值
阻止默认事件 ev.preventDefault();
阻止冒泡的操作 ev.stopPropagation(); return false; // 阻止默认事件 +阻止冒泡的操作
One() 表示事件只执行一次
$(‘div’).one(‘click’,function(){
alert(123);
})
offset() 获取元素距离屏幕的距离
$(‘div’).offset().left
$(‘div’).offset().top
Position() 获取元素距离父元素的距离,元素被定位,margin不算,只能是left值,
到有定位的父级的left值,把当前元素转化成类似定位的形式
$(‘div’).position().left;
$(‘div’).position().top;
parent() 获取父级
offsetParent() 获取有定位的父级
val()
$(‘input’).val();
size() 获取一组元素的长度,像length
$(‘li’).size();
each() 相当于原生的for()循环 each()当中可以接受回调函数
$(‘li’).each(function(下标,元素)){
}
$(‘li’).each(function(I,elem){
$(elem).html(i);
})
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
一参(下标),二参(每个元素)
编写拖拽
$(window).width() //浏览器当前窗口可视区域宽度,不包含滚动条
$(window).height() //浏览器当前窗口可视区域高度,不包含滚动条
$(document).width() //浏览器当前窗口文档对象宽度,不包含右边的滚动条的宽度
$(document).height() //浏览器当前窗口文档的高度,包含了滚动条的高度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
- jQuery基础知识点(下)
在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 //获取文本框的值 //txt.value var val = $( ...
- jQuery基础知识点(DOM操作)
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- Jquery基础知识点
1.选择器:查找和过滤 查找:向下查找用find(), 向上查找用parent(), 同级查找用next(), prev() 过滤:和函数式编程的map.filter类似,jQuery对象也有类 ...
- jQuery基础知识点(上)
jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支 ...
- Jquery基础知识点梳理
1.第一个jq程序 a.jq对象和dom对象的方法不能混用 b.dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了 2.jq选择器 基本选择器 $('b ...
- .NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
随机推荐
- Codeforces Round #310 (Div. 1) C. Case of Chocolate (线段树)
题目地址:传送门 这题尽管是DIV1的C. . 可是挺简单的. .仅仅要用线段树分别维护一下横着和竖着的值就能够了,先离散化再维护. 每次查找最大的最小值<=tmp的点,能够直接在线段树里搜,也 ...
- CRM 配置 ADFS后,使用自定义STS遇到的问题总结
1 登录ADFS服务查看 ADFS日志 2 根据日志提示的错误,设置ADFS对应的属性 (Get-ADFSRelyingPartyTrust) | Set-ADFSRelyingPartyTrust ...
- 添加和删除节点(HTML元素)
创建新的HTML元素 <div id="div1"> <p id="p1">这是一个段落</p> <p id=&quo ...
- HDU4009 Transfer water —— 最小树形图 + 不定根 + 超级点
题目链接:https://vjudge.net/problem/HDU-4009 Transfer water Time Limit: 5000/3000 MS (Java/Others) Me ...
- 在 SharePoint 2013 中针对地理位置字段创建地图视图
在 SharePoint 2013 中针对地理位置字段创建地图视图 了解如何通过在 SharePoint 2013 列表中使用地图视图来显示位置信息.您可以通过 SharePoint 用户界面 (UI ...
- 解决Linux主机上的 远程MySQL客户端无法连接的问题
无法连接到 MySQL 数据库可能的原因有: 1. PHP 无法连接 MySQL 可能是 PHP 配置不正确,没加上连接 MySQL 的功能. 2. MySQL 软件包升级,但没有升级数据库,或安装 ...
- Sencha Cmd使用
通过Sencha Cmd辅助开发基于ExtJS4 MVC的项目 http://www.ineeke.com/archives/1465/ ExtJS4.2:Sencha Cmd 介绍:http://w ...
- ubuntu 12.04 samba 配置(转载)
转自:http://blog.sina.com.cn/s/blog_a5b607f801013av9.html 首先当然是要安装samba了,呵呵: 代码: sudo apt-get install ...
- Java 集合系列
1.http://www.cnblogs.com/skywang12345/p/3308498.html
- bzoj 4820: [Sdoi2017]硬币游戏【kmp+高斯消元】
有点神,按照1444的做法肯定会挂 注意到它的概率是相同的,所以可以简化状态 详见http://www.cnblogs.com/candy99/p/6701221.html https://www.c ...