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基础知识点总结的更多相关文章

  1. jQuery基础知识点(下)

    在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 //获取文本框的值 //txt.value var val = $( ...

  2. jQuery基础知识点(DOM操作)

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  3. Jquery基础知识点

    1.选择器:查找和过滤 查找:向下查找用find(),  向上查找用parent(),  同级查找用next(),  prev() 过滤:和函数式编程的map.filter类似,jQuery对象也有类 ...

  4. jQuery基础知识点(上)

    jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支 ...

  5. Jquery基础知识点梳理

    1.第一个jq程序 a.jq对象和dom对象的方法不能混用 b.dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了 2.jq选择器 基本选择器 $('b ...

  6. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  7. JavaScript 开发者经常忽略或误用的七个基础知识点(转)

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  8. JavaScript 开发者经常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  9. JavaScript开发者常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

随机推荐

  1. Codeforces Round #310 (Div. 1) C. Case of Chocolate (线段树)

    题目地址:传送门 这题尽管是DIV1的C. . 可是挺简单的. .仅仅要用线段树分别维护一下横着和竖着的值就能够了,先离散化再维护. 每次查找最大的最小值<=tmp的点,能够直接在线段树里搜,也 ...

  2. CRM 配置 ADFS后,使用自定义STS遇到的问题总结

    1 登录ADFS服务查看 ADFS日志 2 根据日志提示的错误,设置ADFS对应的属性 (Get-ADFSRelyingPartyTrust) | Set-ADFSRelyingPartyTrust  ...

  3. 添加和删除节点(HTML元素)

    创建新的HTML元素 <div id="div1"> <p id="p1">这是一个段落</p> <p id=&quo ...

  4. HDU4009 Transfer water —— 最小树形图 + 不定根 + 超级点

    题目链接:https://vjudge.net/problem/HDU-4009 Transfer water Time Limit: 5000/3000 MS (Java/Others)    Me ...

  5. 在 SharePoint 2013 中针对地理位置字段创建地图视图

    在 SharePoint 2013 中针对地理位置字段创建地图视图 了解如何通过在 SharePoint 2013 列表中使用地图视图来显示位置信息.您可以通过 SharePoint 用户界面 (UI ...

  6. 解决Linux主机上的 远程MySQL客户端无法连接的问题

    无法连接到 MySQL 数据库可能的原因有: 1. PHP 无法连接 MySQL 可能是 PHP 配置不正确,没加上连接 MySQL 的功能. 2. MySQL 软件包升级,但没有升级数据库,或安装 ...

  7. Sencha Cmd使用

    通过Sencha Cmd辅助开发基于ExtJS4 MVC的项目 http://www.ineeke.com/archives/1465/ ExtJS4.2:Sencha Cmd 介绍:http://w ...

  8. ubuntu 12.04 samba 配置(转载)

    转自:http://blog.sina.com.cn/s/blog_a5b607f801013av9.html 首先当然是要安装samba了,呵呵: 代码: sudo apt-get install ...

  9. Java 集合系列

    1.http://www.cnblogs.com/skywang12345/p/3308498.html

  10. bzoj 4820: [Sdoi2017]硬币游戏【kmp+高斯消元】

    有点神,按照1444的做法肯定会挂 注意到它的概率是相同的,所以可以简化状态 详见http://www.cnblogs.com/candy99/p/6701221.html https://www.c ...