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. Servlet第七课:ServletContext HttpSession 以及HttpServletRequest之间的关系

    课程目标: ① 在Servlet中懂得ServletContext HttpSession 以及HttpServletRequest之间的关系 ② 懂得怎样使用它们 概念介绍: 1. [共同点]不管对 ...

  2. 使用HD/IDE层的ioctl接口获取磁盘容量get_hdd_max_sector

    利用HD/IDE layer的ioctl函数接口获取HD/IDE的磁盘容量.HDIO_DRIVE_TASK  能发出訪问LBA地址的命令.但不能读写数据. #include <stdio.h&g ...

  3. 嵌入式开发之davinci--- 8127 中camer 和 capture link 的区别

    (1)camera link (2)capture link (3)两者区别 (1)camera link 走的是isp iss link采集的得到的数据,适用于ipnc 框架 (2)capture ...

  4. 普通用户无法登陆SSH问题

    Linux正常情况下普通用户是可以登陆SSH的,除非系统管理员作了修改,如果没有修改的情况无法登陆可以尝试以下方法解决: 步骤/方法 1 查看 /etc/ssh/sshd_config文件 发现 ro ...

  5. lineage 世系 血缘 容错机制 DAG

    当某个RDD的部分数据丢失时候,Saprk会根据记录的世系关系找到该RDD的父RDD以及更上级的RDD.只需要将该RDD依赖的上级RDD重新计算就可以将该RDD进行恢复. Directed Acycl ...

  6. CMake使用总结【转】

    本文转载自:https://www.mawenbao.com/note/cmake.html 总结CMake的常用命令,并介绍有用的CMake资源. CMake意为cross-platform mak ...

  7. YTU 2905: The Sum of 1...N

    2905: The Sum of 1...N 时间限制: 1 Sec  内存限制: 128 MB 提交: 281  解决: 51 题目描述 Given an integer n,your task i ...

  8. 添加数据成功之后,通过true、false决定是否跳转

    /** * 新增版本 * * @return */ public String AddVersionInfo() { // 快捷菜单 Integer code = Integer.parseInt(g ...

  9. 使用C#开发HTTP服务器系列之访问主页

    各位朋友大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.在这个系列文章的第一篇中,我们着重认识和了解了HTTP协议,并在此基础上实现了一个可交互的W ...

  10. codeforces 682C C. Alyona and the Tree(dfs)

    题目链接: C. Alyona and the Tree time limit per test 1 second memory limit per test 256 megabytes input ...