精华内容
下载资源
问答
  • jQuery知识体系梳理

    2016-04-12 02:59:19
    下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中。 引入jQuery文件库  2. jQuery 基础选择器 2-1 #id 选择器 2-2 element 选择器 2-3 .class 选择器 2-4 * 选择器 2-5 sele1,sele2,se

    1. 环境搭建


    下载jQuery文件库

    在jQuery的官方网站(http://jquery.com)中。



     2. jQuery 基础选择器


    2-1 #id 选择器         


    2-2 element 选择器


    2-3 .class 选择器


    2-4 * 选择器


    2-5 sele1,sele2,seleN分组选择器


    2-6 ance desc选择器


    2-7 parent > child选择器


    2-8 prev + next选择器


    2-9 prev ~ siblings选择器


    使用示范: $('#id')、$('.class')


    3.  jQuery过滤性选择器


    3-1 :first过滤选择器


    3-2 :eq(index)过滤选择器


    3-3 :contains(text)过滤选择器


    3-4 :has(selector)过滤选择器


    3-5 :hidden过滤选择器


    3-6 :visible过滤选择器


    3-7 [attribute=value]属性选择器


    3-8 [attribute!=value]属性选择器


    3-9 [attribute*=value]属性选择器


    3-10 :first-child子元素过滤选择器


    3-11 :last-child子元素过滤选择器



    4.  jQuery表单选择器


    4-1 :input表单选择器


    4-2 :text表单文本选择器


    4-3 :password表单密码选择器


    4-4 :radio单选按钮选择器


    4-5 :checkbox复选框选择器


    4-6 :submit提交按钮选择器


    4-7 :image图像域选择器


    4-8 :button表单按钮选择器


    4-9 :checked选中状态选择器


    4-10 :selected选中状态选择器



    5.  jQuery 操作DOM元素


    5-1 使用attr()方法控制元素的属性


    5-2 操作元素的内容


    5-3 操作元素的样式


    5-4 移除属性和样式


    5-5 使用append()方法向元素内追加内容


    5-6 使用appendTo()方法向被选元素内插入内容


    5-7 使用before()和after()在元素前后插入内容


    5-8 使用clone()方法复制元素


    5-9 替换内容


    5-10 使用wrap()和wrapInner()方法包裹元素和内容


    5-11 使用each()方法遍历元素


    5-12 使用remove()和empty()方法删除元素



    6.  jQuery 事件与应用


    6-1 页面加载时触发ready()事件


    6-2 使用bind()方法绑定元素的事件


    6-3 使用hover()方法切换事件


    6-4 使用toggle()方法绑定多个函数


    6-5 使用unbind()方法移除元素绑定的事件


    6-6 使用one()方法绑定元素的一次性事件


    6-7 调用trigger()方法手动触发指定的事件


    6-8 文本框的focus和blur事件


    6-9 下拉列表框的change事件


    6-10 调用live()方法绑定元素的事件



    7. jQuery 动画特效


    7-1 调用show()和hide()方法显示和隐藏元素


    7-2 动画效果的show()和hide()方法


    7-3 调用toggle()方法实现动画切换效果


    7-4 使用slideUp()和slideDown()方法的滑动效果


    7-5 使用slideToggle()方法实现图片“变脸”效果


    7-6 使用fadeIn()与fadeOut()方法实现淡入淡出效果


    7-7 使用fadeTo()方法设置淡入淡出效果的不透明度


    7-8 调用animate()方法制作简单的动画效果


    7-9 调用animate()方法制作移动位置的动画


    7-10 调用stop()方法停止当前所有动画效果


    7-11 调用delay()方法延时执行动画效果



    8.  jQuery 实现Ajax应用


    8-1 使用load()方法异步请求数据


    8-2 使用getJSON()方法异步加载JSON格式数据


    8-3 使用getScript()方法异步加载并执行js文件


    8-4 使用get()方法以GET方式从服务器获取数据


    8-5 使用post()方法以POST方式从服务器发送数据


    8-6 使用serialize()方法序列化表单元素值


    8-7 使用ajax()方法加载服务器数据


    8-8 使用ajaxSetup()方法设置全局Ajax默认选项


    8-9 使用ajaxStart()和ajaxStop()方法



    9.jQuery 常用插件


    9-1 表单验证插件——validate


    9-2 表单插件——form


    9-3 图片灯箱插件——lightBox


    9-4 图片放大镜插件——jqzoom


    9-5 cookie插件——cookie


    9-6 搜索插件——autocomplete


    9-7 右键菜单插件——contextmenu


    9-8 自定义对象级插件——lifocuscolor插件


    9-9 自定义类级别插件—— twoaddresult



    10. jQuery UI型插件


    10-1 拖曳插件——draggable


    10-2 放置插件——droppable


    10-3 拖曳排序插件——sortable


    10-4 面板折叠插件——accordion


    10-5 选项卡插件——tabs


    10-6 对话框插件——dialog


    10-7 菜单工具插件——menu


    10-8 微调按钮插件——spinner


    10-9 工具提示插件——tooltip



    11.  jQuery 工具类函数


    11-1 获取浏览器的名称与版本信息


    11-2 检测浏览器是否属于W3C盒子模型


    11-3 检测对象是否为空


    11-4 检测对象是否为原始对象


    11-5 检测两个节点的包含关系


    11-6 字符串操作函数


    11-7 URL操作函数


    11-8 使用$.extend()扩展工具函数


    11-9 使用$.extend()扩展Object对象


    以上就是JQ所有常用基础知识点的梳理,如果感兴趣的朋友可以按照这个知识体系进行jquery的补充。

    展开全文
  • jQuery知识体系目录

    2017-04-12 23:00:00
    1.jQuery的选择器 转载于:https://www.cnblogs.com/zhuji/p/6701873.html

    1.jQuery的选择器

    转载于:https://www.cnblogs.com/zhuji/p/6701873.html

    展开全文
  • 在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery有很多技术人员在使用它做项目。 jQuery库包含: HTML...
        

    点击上方“程序IT圈”,选择“置顶公众号”

    每天早晨IT圈的推文,进来留言打卡


    640?wx_fmt=gif


    640?wx_fmt=jpeg

    今天这篇是前端工程师:Jeskson投稿的文章,个人感觉整理的不错,分享给大家!

    背景

    在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery有很多技术人员在使用它做项目。

    jQuery库包含:

    HTML元素的获取,HTML元素操作,css的操作,HTML事件函数,JavaScript特效和动画,HTML dom的遍历和修改,ajax,utilities。

    jQuery 安装:

    下载jQuery库,下载地址

    production version
    用于实际的网站中

    development version
    用于测试和开发

    jQuery库是一个JavaScript文件

    <head>	
    <script src="jquery-1.10.2.min.js"></script>	
    </head>

    JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

    从CDN中载入jQuery

    // 百度	
    <head>	
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>	
    </head>	
    	
    // 谷歌	
    <head>	
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
    </head>	
    	
    // 微软	
    <head>	
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>	
    </head>

    jQuery目录

    640?wx_fmt=other

    jQuery语法

    基础语法:

    1. 美元符号定义 jQuery

    2. 选择符() "查询"和"查找" HTML 元素

    3. jQuery 的方法执行对元素的操作

    jQuery代码

    $(document).ready(function(){	
    //这里是jQuery代码	
    });	
     	
    $(function(){	
     // 这里是jQuery代码	
    });	
    	
    $( function() {} );

    DOM加载完成后才可以对DOM进行操作,如果文档没有完全加载之前运行函数,会导致操作失败。

    jQuery 选择器

    元素选择器,#id选择器,.class选择器

    $("p:first")    	
    选取第一个 <p> 元素	
    	
    $("ul li:first")    	
    选取第一个 <ul> 元素的第一个 <li> 元素	
    	
    $("ul li:first-child")  	
    选取每个 <ul> 元素的第一个 <li> 元素	
    	
    $("[href]") 	
    选取带有 href 属性的元素	
    	
    $("a[target='_blank']") 	
    选取所有 target 属性值等于 "_blank" 的 <a> 元素

    jQuery 事件

    jQuery事件处理方法是jQuery中的核心函数。

    <script type="text/javascript">	
    $(document).ready(function(){  	
     $("button").click(function(){	
        $("p").hide();	
      });});	
    </script>

    jQuery名称冲突$符号

    jQuery使用名为noConflict()方法来解决该问题

    $(selector).dblclick(function)  	
    触发或将函数绑定到被选元素的双击事件	
    	
    $(selector).mouseover(function) 	
    触发或将函数绑定到被选元素的鼠标悬停事件

    jQuery 隐藏/显示

    hide()和show()方法来隐藏和显示HTML元素

    $("#hide").click(function(){	
      $("p").hide();	
    });	
     	
    $("#show").click(function(){	
      $("p").show();	
    });	
    	
    $(selector).hide(speed,callback);	
    $(selector).show(speed,callback);	
    	
    $("button").click(function(){	
      $("p").hide(1000);	
    });

    toggle()方法来切换hide()和show()方法
    显示被隐藏的元素,隐藏已显示的元素

    $("button").click(function(){	
      $("p").toggle();	
    });	
    	
    $(selector).toggle(speed,callback);

    jQuery 淡入淡出

    fadeIn()
    jQuery fadeIn()用于淡入已隐藏的元素

    fadeOut()
    jQuery fadeOut() 方法用于淡出可见元素

    fadeToggle()
    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

    fadeTo()
    jQuery fadeTo() 方法允许渐变为给定的不透明度

    $(selector).fadeIn(speed,callback);	
    	
    $("button").click(function(){	
      $("#div1").fadeIn();	
      $("#div2").fadeIn("slow");	
      $("#div3").fadeIn(3000);	
    });	
    	
    $(selector).fadeOut(speed,callback)	
    	
    $("button").click(function(){	
      $("#div1").fadeOut();	
      $("#div2").fadeOut("slow");	
      $("#div3").fadeOut(3000);	
    });	
    	
    $(selector).fadeToggle(speed,callback);	
    	
    $("button").click(function(){	
      $("#div1").fadeToggle();	
      $("#div2").fadeToggle("slow");	
      $("#div3").fadeToggle(3000);	
    });	
    	
    $(selector).fadeTo(speed,opacity,callback);	
    	
    $("button").click(function(){	
      $("#div1").fadeTo("slow",0.15);	
      $("#div2").fadeTo("slow",0.4);	
      $("#div3").fadeTo("slow",0.7);	
    });

    jQuery 滑动

    slideDown()
    用于向下滑动元素

    slideUp()
    用于向上滑动元素

    slideToggle()
    可以在 slideDown() 与 slideUp() 方法之间进行切换

    $(selector).slideDown(speed,callback);	
    	
    $("#flip").click(function(){	
      $("#panel").slideDown();	
    });	
    	
    $(selector).slideUp(speed,callback);	
    	
    $("#flip").click(function(){	
      $("#panel").slideUp();	
    });	
    	
    $(selector).slideToggle(speed,callback);	
    	
    $("#flip").click(function(){	
      $("#panel").slideToggle();	
    });

    jQuery 动画

    animate()方法用于创建自定义动画


    640?wx_fmt=other


    $(selector).animate({params},speed,callback);	
    	
    $("button").click(function(){	
      $("div").animate({left:'250px'});	
    });	
    	
    $("button").click(function(){	
      $("div").animate({	
        left:'250px',    	
        opacity:'0.5',    	
        height:'150px',    	
        width:'150px'	
      });	
    });	
    	
    $("button").click(function(){	
      $("div").animate({	
        left:'250px', 	
        height:'+=150px',   	
        width:'+=150px'	
      });	
     });	
    	
    $("button").click(function(){	
      $("div").animate({	
        height:'toggle'	
      });	
    });	
    	
    $("button").click(function(){	
      var div=$("div");  	
      div.animate({height:'300px',opacity:'0.4'},"slow");	
      div.animate({width:'300px',opacity:'0.8'},"slow");	
      div.animate({height:'100px',opacity:'0.4'},"slow"); 	
      div.animate({width:'100px',opacity:'0.8'},"slow");	
    });

    jQuery 停止动画

    Stop()方法适用于所有jQuery效果函数

    $(selector).stop(stopAll,goToEnd);	
    	
    $("#stop").click(function(){	
      $("#panel").stop();	
    });

    jQuery Callback函数

    $("p").hide(1000,function(){	
    alert("The paragraph is now hidden");	
    });

    jQuery 链

    许在一条语句中运行多个jQuery方法

    $("#p1").css("color","pink").slideUp(2000).slideDown(2000);

    jQuery 获取和jQuery 设置

    text()--设置或返回所选元素的文本内容

    html()--设置或返回元素的内容(包括HTML标记)

    val()--设置或返回表单字段的值

    jQuery 添加元素

    append()--在被选元素的结尾插入内容

    prepend()--在被选元素的开头插入内容

    after()--在被选元素之后插入内容

    before()--在被选元素之前插入内容

    jQuery 删除元素

    remove()
    删除被选元素(及其子元素)
    也可以接受一个参数,允许对被删除元素进行过滤

    640?wx_fmt=other

    empty()
    从被选元素中删除子元素

    640?wx_fmt=other

    jQuery CSS

    addClass()--向被选元素添加一个或多个类
    removeClass()--从被选元素删除一个或多个类

    toggleClass()--对被选元素进行添加、删除类的切换操作
    css()--设置或返回样式属性

    jQuery 尺寸

    width()--设置或返回元素的宽度(不包括内边距、边框或外边距)
    height()--设置或返回元素的高度(不包括内边距、边框或外边框)

    innerWidth()--返回元素的宽度(包括内边距)
    innerHeight()--返回元素的高度(包括内边距)

    outerWidth()--返回元素的宽度(包括内边距和边框)
    outHeight()--返回元素的高度(包括内边距和边框)

    jQuery 遍历

    640?wx_fmt=other

    jQuery 祖先

    parent()
    返回被选元素的直接父元素
    只会向上一级对DOM数进行遍历

    parents()
    返回被选元素的所有祖先元素
    所有祖先

    parentsUntil()
    返回介于两个给定元素之间的所有祖先元素

    jQuery 后代

    children()
    返回被选元素的所有直接子元素

    find()
    返回被选元素的后代元素

    jQuery 同胞

    siblings()
    返回被选元素的所有同胞元素

    $("h2").siblings();

    next()
    返回被选元素的下一个同胞元素

    nextAll()
    返回被选元素的所有跟随的同胞元素

    nextUntil()
    返回介于两个给定参数之间的所有跟随的同胞元素

    prev() prevAll() prevUntil()
    返回前面的同胞元素

    jQuery 过滤

    first()
    返回被选元素的首个元素

    last()
    回被选元素的最后一个元素

    eq()
    返回被选元素中带有指定索引号的元素
    索引号从0开始,因此首个元素的索引号是0而不是1

    Filter()方法 Not()方法
    不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
    Not()方法返回不匹配标准的所有元素

    jQuery AJAX

    AJAX是与服务器交换数据的技术
    在不重载全部页面的情况下,实现了对部分网页的更新

    AJAX = 异步 JavaScript 和 XML

    Load()方法

    $(selector).load(URL,data,callback);	
    	
    $("#div1").load("demo_test.txt");	
    	
    $("button").click(function(){	
      $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){	
        if(statusTxt=="success")	
          alert("外部内容加载成功!");	
        if(statusTxt=="error")	
          alert("Error: "+xhr.status+": "+xhr.statusText);	
      });	
    });	
    	
    $.get(URL,callback);	
    	
    $("button").click(function(){	
      $.get("demo_test.asp",function(data,status){	
        alert("数据: " + data + "\n状态: " + status);	
      });	
    });	
    	
    $.post(URL,data,callback);	
    	
    $("button").click(function(){	
      $.post("demo_test_post.asp",	
      {	
        name:"",	
        url:"http://www..com"	
      },	
      function(data,status){	
        alert("数据: " + data + "\状态: " + status);	
      });	
    });

    jQuery noConflict()方法

    $.noConflict();	
    jQuery(document).ready(function(){	
      jQuery("button").click(function(){	
        jQuery("p").text("jQuery 仍在运行");	
      });	
    });	
    	
    var jq = $.noConflict();	
    jq(document).ready(function(){	
      jq("button").click(function(){	
        jq("p").text("jQuery 仍在运行"); 	
      });	
    });	
    	
    $.noConflict();	
    jQuery(document).ready(function($){	
      $("button").click(function(){	
        $("p").text("jQuery 仍在运行");	
      });	
    });

    如果你喜欢,欢迎转发出去,让更多的同学可以看到这篇文章吧~


    640?wx_fmt=png

    点个"在看",再走吧 640?wx_fmt=gif
    展开全文
  • 在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery有很多技术人员在使用它做项目。 jQuery库包含: HTML...

    背景

    在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery有很多技术人员在使用它做项目。

    jQuery库包含:

    HTML元素的获取,HTML元素操作,css的操作,HTML事件函数,JavaScript特效和动画,HTML dom的遍历和修改,ajax,utilities。

    jQuery 安装:

    下载jQuery库,下载地址

    production version
    用于实际的网站中

    development version
    用于测试和开发

    jQuery库是一个JavaScript文件

    <head>
    <script src="jquery-1.10.2.min.js"></script>
    </head>
    

    JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

    从CDN中载入jQuery

    // 百度
    <head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    
    // 谷歌
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    
    // 微软
    <head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    </head>
    

    jQuery目录

    jQuery目录.png

    jQuery语法

    基础语法:

    1. 美元符号定义 jQuery
    2. 选择符() “查询"和"查找” HTML 元素
    3. jQuery 的方法执行对元素的操作

    jQuery代码

    $(document).ready(function(){
    //这里是jQuery代码
    });
     
    $(function(){
     // 这里是jQuery代码
    });
    
    $( function() {} );
    

    DOM加载完成后才可以对DOM进行操作,如果文档没有完全加载之前运行函数,会导致操作失败。

    jQuery 选择器

    元素选择器,#id选择器,.class选择器

    $("p:first")	
    选取第一个 <p> 元素
    
    $("ul li:first")	
    选取第一个 <ul> 元素的第一个 <li> 元素
    
    $("ul li:first-child")	
    选取每个 <ul> 元素的第一个 <li> 元素
    
    $("[href]")	
    选取带有 href 属性的元素
    
    $("a[target='_blank']")	
    选取所有 target 属性值等于 "_blank" 的 <a> 元素
    

    jQuery 事件

    jQuery事件处理方法是jQuery中的核心函数。

    <script type="text/javascript">
    $(document).ready(function(){  
     $("button").click(function(){
        $("p").hide();
      });});
    </script>
    

    jQuery名称冲突$符号

    jQuery使用名为noConflict()方法来解决该问题

    $(selector).dblclick(function)	
    触发或将函数绑定到被选元素的双击事件
    
    $(selector).mouseover(function)	
    触发或将函数绑定到被选元素的鼠标悬停事件
    

    jQuery 隐藏/显示

    hide()和show()方法来隐藏和显示HTML元素

    $("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });
    
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    
    $("button").click(function(){
      $("p").hide(1000);
    });
    

    toggle()方法来切换hide()和show()方法
    显示被隐藏的元素,隐藏已显示的元素

    $("button").click(function(){
      $("p").toggle();
    });
    
    $(selector).toggle(speed,callback);
    

    jQuery 淡入淡出

    fadeIn()
    jQuery fadeIn()用于淡入已隐藏的元素

    fadeOut()
    jQuery fadeOut() 方法用于淡出可见元素

    fadeToggle()
    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

    fadeTo()
    jQuery fadeTo() 方法允许渐变为给定的不透明度

    $(selector).fadeIn(speed,callback);
    
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });
    
    $(selector).fadeOut(speed,callback)
    
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
    
    $(selector).fadeToggle(speed,callback);
    
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });
    
    $(selector).fadeTo(speed,opacity,callback);
    
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });
    

    jQuery 滑动

    slideDown()
    用于向下滑动元素

    slideUp()
    用于向上滑动元素

    slideToggle()
    可以在 slideDown() 与 slideUp() 方法之间进行切换

    $(selector).slideDown(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideDown();
    });
    
    $(selector).slideUp(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideUp();
    });
    
    $(selector).slideToggle(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });
    

    jQuery 动画

    animate()方法用于创建自定义动画
    image.png

    $(selector).animate({params},speed,callback);
    
    $("button").click(function(){
      $("div").animate({left:'250px'});
    });
    
    $("button").click(function(){
      $("div").animate({
        left:'250px',    
        opacity:'0.5',    
        height:'150px',    
        width:'150px'
      });
    });
    
    $("button").click(function(){
      $("div").animate({
        left:'250px', 
        height:'+=150px',   
        width:'+=150px'
      });
     });
    
    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });
    
    $("button").click(function(){
      var div=$("div");  
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow"); 
      div.animate({width:'100px',opacity:'0.8'},"slow");
    });
    

    jQuery 停止动画

    Stop()方法适用于所有jQuery效果函数

    $(selector).stop(stopAll,goToEnd);
    
    $("#stop").click(function(){
      $("#panel").stop();
    });
    

    jQuery Callback函数

    $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
    

    jQuery 链

    许在一条语句中运行多个jQuery方法

    $("#p1").css("color","pink").slideUp(2000).slideDown(2000);
    

    jQuery 获取和jQuery 设置

    text()–设置或返回所选元素的文本内容

    html()–设置或返回元素的内容(包括HTML标记)

    val()–设置或返回表单字段的值

    jQuery 添加元素

    append()–在被选元素的结尾插入内容

    prepend()–在被选元素的开头插入内容

    after()–在被选元素之后插入内容

    before()–在被选元素之前插入内容

    jQuery 删除元素

    remove()
    删除被选元素(及其子元素)
    也可以接受一个参数,允许对被删除元素进行过滤

    image.png

    empty()
    从被选元素中删除子元素

    image.png

    jQuery CSS

    addClass()–向被选元素添加一个或多个类
    removeClass()–从被选元素删除一个或多个类

    toggleClass()–对被选元素进行添加、删除类的切换操作
    css()–设置或返回样式属性

    jQuery 尺寸

    width()–设置或返回元素的宽度(不包括内边距、边框或外边距)
    height()–设置或返回元素的高度(不包括内边距、边框或外边框)

    innerWidth()–返回元素的宽度(包括内边距)
    innerHeight()–返回元素的高度(包括内边距)

    outerWidth()–返回元素的宽度(包括内边距和边框)
    outHeight()–返回元素的高度(包括内边距和边框)

    jQuery 遍历

    //img.mukewang.com/wiki/5b20ede10169b4a203530240.jpg

    jQuery 祖先

    parent()
    返回被选元素的直接父元素
    只会向上一级对DOM数进行遍历

    parents()
    返回被选元素的所有祖先元素
    所有祖先

    parentsUntil()
    返回介于两个给定元素之间的所有祖先元素

    jQuery 后代

    children()
    返回被选元素的所有直接子元素

    find()
    返回被选元素的后代元素

    jQuery 同胞

    siblings()
    返回被选元素的所有同胞元素

    $("h2").siblings();
    

    next()
    返回被选元素的下一个同胞元素

    nextAll()
    返回被选元素的所有跟随的同胞元素

    nextUntil()
    返回介于两个给定参数之间的所有跟随的同胞元素

    prev() prevAll() prevUntil()
    返回前面的同胞元素

    jQuery 过滤

    first()
    返回被选元素的首个元素

    last()
    回被选元素的最后一个元素

    eq()
    返回被选元素中带有指定索引号的元素
    索引号从0开始,因此首个元素的索引号是0而不是1

    Filter()方法 Not()方法
    不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
    Not()方法返回不匹配标准的所有元素

    jQuery AJAX

    AJAX是与服务器交换数据的技术
    在不重载全部页面的情况下,实现了对部分网页的更新

    AJAX = 异步 JavaScript 和 XML

    Load()方法

    $(selector).load(URL,data,callback);
    
    $("#div1").load("demo_test.txt");
    
    $("button").click(function(){
      $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容加载成功!");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    });
    
    $.get(URL,callback);
    
    $("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
      });
    });
    
    $.post(URL,data,callback);
    
    $("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"",
        url:"http://www..com"
      },
      function(data,status){
        alert("数据: " + data + "\状态: " + status);
      });
    });
    

    jQuery noConflict()方法

    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行");
      });
    });
    
    var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("p").text("jQuery 仍在运行"); 
      });
    });
    
    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("jQuery 仍在运行");
      });
    });
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

    展开全文
  • [jQuery知识]jQuery之知识体系

    千次阅读 多人点赞 2016-12-06 23:47:32
    知识体系:jQuery基础知识一jQuery之知识二-选择器[jQuery知识]jQuery之知识三-过滤器[jQuery知识]jQuery之知识四-DOM和CSS操作[jQuery知识]jQuery之知识五-DOM节点操作[jQuery知识]jQuery之知识六-表单操作[jQuery...
  • 刘玉刚 2016-12-08 13:04 jQuery基础知识一 http://blog.csdn.net/baihuaxiu123/article/details/52172533 jQuery之知识二-选择器 ... [jQuery知识]jQuery之知识
  • jquery知识体系总结

    2017-05-02 18:35:57
    jquery作为一个常用js框架,我们应该对它能够做什么有一个自己的知识体系,这里就把我们常用的一些东西列举出来。 使用jquery,必须理解这么一句话,jquery使得我们的代码书写更加方便简洁,目的是让我们把自己...
  • 在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery知识体系。能做到,一看到jQuery,脑海就浮现jQuery整个的知识体系框架来。...
  • jQuery基本知识体系

    2014-06-18 10:59:00
    在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery知识体系。能做到,一看到jQuery,脑海就浮现jQuery整个的知识体系框架来。...
  • 今天推荐一个前端学习干货——【JQuery基础教程】。jQuery是一个优秀的轻量级Javascript库,兼容CSS3,还兼容各种浏览器,在Web前端开发中广泛使用...
  • 前言 1.自定义动画 2.列队动画方法 3.... 4....一....jQuery 提供了几种简单常用的固定...这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。$('.animate').click(function ()
  • [jQuery知识]jQuery之知识十二-Ajax中级

    千次阅读 多人点赞 2016-12-10 00:24:33
    前言 ...一.getScript()和.getJSON()jQuery 提供了一组用于特定异步加载的方法:.getScript(),用于加载特定的JS文件;.getScript(),用于加载特定的 JS 文件;.getJSON(),用于专门加载 JSON 文件。有时
  • [jQuery知识]jQuery之知识六-表单操作

    千次阅读 2016-12-07 00:02:18
    表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素。一.常规选择器我们可以...
  • [jQuery知识]jQuery之知识八-事件对象

    千次阅读 2016-12-07 22:51:20
    前言 1.事件对象 2....一....之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,...[jQuery知识]jQuery之知识体系
  • [jQuery知识]jQuery之知识十-动画初级

    千次阅读 2016-12-07 23:22:10
    前言 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行。但最近几年里, 我们已经很少看到这种情况了,绝大部分已经使用 JavaScript 动画效果来取代 flash。...[jQuery知识]jQuery之知识体系
  • [jQuery知识]jQuery之知识十一-Ajax初级

    千次阅读 2016-12-10 00:16:14
    前言 1.Ajax 概述 2.load()方法 ...Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互...[jQuery知识]jQuery之知识体系
  • [jQuery知识]jQuery之知识七-事件初级

    千次阅读 2016-12-07 22:38:21
    前言 1.绑定事件 2.简写事件 3.复合事件 ...一....在 JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、mousedown、mouseup、mousemove、mouseover...[jQuery知识]jQuery之知识体系
  • [jQuery知识]jQuery之知识九-事件高级

    千次阅读 2016-12-07 23:03:51
    由于.live()和.die()在 jQuery1.4.3 版本中废弃了,之后推出语义清晰、减少冒泡传播层次、 又支持链接连缀调用方式的方法:.delegate()和.undelegate()。但这个方法在 jQuery1.7 版本中 被.on()方法整合替代了。 ...
  • [jQuery知识]jQuery之知识三-过滤器

    千次阅读 2016-12-06 22:56:07
    一.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类 ...注意::first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候...[jQuery知识]jQuery之知识体系
  • Python详细知识体系总结(2021版)

    万次阅读 多人点赞 2020-12-18 14:32:35
    Python知识体系总结(持续更新ing) 本文专注整理一些有关Python学习的知识体系,不定期更新。 整理的Python知识体系主要包括基础知识,Python热门的应用方向,推荐书籍,FAQ以及一些常见面试题目,包含了作为一个...
  • 前言 1.创建节点 2.... 3.... 4....DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”。页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点...[jQuery知识]jQuery之知识体系
  • [jQuery知识]jQuery之知识十三-Ajax高级

    千次阅读 2016-12-10 00:29:05
    前言 1.加载请求 2.... 3....在 Ajax 课程中,我们了解了最基本的异步处理方式。本章,我们将了解一下 Ajax 的 一些全局请求事件、跨域处理和其他一些问题。...一....[jQuery知识]jQuery之知识体系
  • 除了对元素内容进行设置和获取,通过 jQuery 也可以对元素本身的属性进行操作,包 括获取属性的属性值、设置属性的属性值,并且可以删除掉属性 $( 'div' ).attr( 'title' ); //获取属性的属性值 $( 'div' ...
  • 前言 1.JSON 和 JSONP 2.jqXHR 对象 ...如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。...JSONP(JSON with Padding)是一个 非官方的协议,它允许在...[jQuery知识]jQuery之知识体系
  • JQuery知识点总结

    2017-07-17 08:50:50
    jQuery 核心方法 $():  参数如果是字符串,此字符串代表选择器  参数是JS原生对象,将其转变为jQuery对象  参数是一个方法,就是执行document.ready() each():将jQuery选择的元素循环遍历 ...
  • Jquery 知识点总结

    2015-06-16 20:17:32
    **DOM对象和jquery对象相互转化。 var jq=jq=(“#jq”); var dom=jq[0];vardom=document.getElementById(“dom”);varjq[0]; var dom=document.getElementById(“dom”); var jq=(dom);∗∗jquery选择器。(dom);...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,471
精华内容 4,188
关键字:

jquery知识体系