• jquery 回顾


    自从用了 Angular 框架,jquery 的使用率直线下降,不过还是得捡起来。

    #、jquery有哪些优点?

    轻量级框架

    强大的选择器,出色的 DOM 操作封装

    可靠的事件处理机制(事件绑定)

    完善的 ajax

    出色的浏览器兼容性

    链式操作

    行为层和结构层分离,支持丰富插件,文档丰富

    #、$():

    是 jQuery() 函数的别称,它用于将任何对象包裹成 jQuery 对象,接着就可以调用定义在 jQuery 对象上的多个不同方法。甚至可以讲一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

    #、jquery 的选择器 ?

    大致分为:基本选择器、层次选择器、表单选择器

    基本选择器:id 选择器(返回单个元素)、标签选择器(返回一组相同标签的元素)、类选择器(返回一组具有相同 css class 的元素)

    层次选择器:$('form input') 所有 form 元素中的 input 元素;$('#main > *') 选择id为 main的所有子元素

    过滤选择器:$('tr:first') 选择所有 tr 元素的一个   $('input[type=checkbox]')  选择所有 type 为 checkbox 的 input  元素。

    表单选择器:$(':input') 选取所有 input、textarea 、select等表单输入元素;$(':text') 选取所有的单行文本框

    #、属性选择器

    #、如何点击一个按钮时使用 jQuery 隐藏其他元素?

    给点击元素绑定 click 方法,将要隐藏的 元素 hide()。

    #、js  window.onload 和 jQuery ready 有何不同?

    文档进入 ready 状态时执行代码。它适用于所有浏览器;只需对 DOM 树的等待。无需对图像或外部资源加载的等待,可以在网页里多次使用。

    window.onload 除了要等待 DOM 被创建,还要等到包括大型图片、音频、视频在内所有外部资源都完全加载;如果加载外部资源花费大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟;且只能使用一次。

    #、获取选中的  checkbox:

    $('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')

    #、radio 单选组第二个元素为当前选中的值

    $('input[type=radio]')[1].checked = true;

    #、找到所有 HTML select 标签的选中项?

    $('[name=NameOfSelectedTag] : selected')

    这段代码结合使用了属性选择器和 :selected 选择器,结果只返回被选中的选项。你可按需修改它,比如用 id 属性而不是 name 属性来获取 <select> 标签。

    #、jQuery 的 each()

    允许遍历一个元素集合。

    #、如何将一个 HTML 元素添加到 DOM 树中?

    #、用 jQuery 代码选择所有在段落内的超链接

    $('p a');

    #、$(this) 和 this 有何不同?

    $(this) 返回的是 jQuery 对象,可以调用多个 jQuery 方法,比如 text() 获取文本, vla() 获取值等。

    this 代表当前元素,它是 js 关键词中的一个,表示上下文中的当前 DOM 元素。

    #、如何使用 jQuery 来提取一个 HTML 标记的属性:例如 链接的 href?

    attr() 方法被用来提取任意一个 HTML 元素的一个属性的值。

    首先需要利用 jQuery 选择及选取到所有的链接或者一个特定的链接,然后可以用 attr() 方法获取 href 属性值

    $('a').each(function() {

      console.log($(this).attr('href'));

    })

    #、设置一个属性值、删除一个属性?

    对象.attr('name', '值');

    删除属性:removeAttr()

    #、设置和获取元素内容

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

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

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

    #、attr 和 prop 的区别

    prop 方法可以操作布尔类型的属性。

    自定义属性 用 attr 获取,prop获取或设定属性值时都会返回 undefined

    例:

    $('#chk1').prop('checked') == false;

    $('#chk1').prop('checked') == true;

    $('#chk1').prop('checked') == undefined;

    $('#chk1').prop('checked') == 'checked';

    #、detach 和 remove 方法区别

     remove 是直接移除了,找不回来。

    detach 则是 移除了,但是能找回来。

    例:

    a = $('p a').detach();

    $('p').append(a);

    ps:empty() 删除匹配的元素集合中所有的子节点

    #、添加删除 css 类

    addClass 和 removeClass

    #、cdn 加载 jquery 库的主要优势?

    更快的下载速度

    如果已经从同一个 cdn 下载相同版本的 jquery,不会再去下载一次。

    #、get() 和 ajax() 区别

    get() 方法是一个只获取一些专门数据的专门化方法

    ajax() 则更加强大,更具可配置性、可以设置等待或如何处理错误等

    #、jquery 中的方法链

    是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方便=面更加出色。

    (回调,回调函数作为参数传递到另一个函数中,一旦事件发生或者某一个任务完成时被执行,经常使用在异步代码中。)

    #、在一个 jquery 事件处理程序里返回了 FALSE,会怎么样

    通常用于阻止事件向上冒泡

    #、document.getElementbyId('id') 和 $('#id') 哪种更高效?

    document 更高效,直接调用了 javascript 引擎

    $('#id') 虽然内部使用的同样是 getElementById 处理 id 获取,但是经过处理返回的是 jQuery 对象

    #、jquery 动画
    显示、隐藏:show()、hide()

    淡入、淡出:fadeIn()、fadeOut()

    上划、下滑:slideUp()、slideDown()

    #、显示和隐藏效果代码?

    document.getElementById('p').style.display = 'block/none';

    $('p').css('display': 'block/none');

    show/hide(speed, [callback]); 

    #、jquery 遍历节点?

    #、delegate 方法?

    需要给父元素下子元素添加事件时,可以使用。(子元素可能在未来出现)

    可以发现所有新追加在 button 后面的 p 元素,也绑定了 click 方法,同样点击之后会被折叠;且并不会影响到 div 以外的 p 元素。

    demo引用:https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_delegate_newelement

    #、禁用浏览器前进后退

    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
         window.history.forward(1);
         //OR
         window.history.forward(-1);
    });
    </script>

    #、匹配索引值

    偶数:$('tr: even')

    奇数:$('tr:odd')

    给定索引值:$('tr:eq(1)')

    大于索引值:$('tr:gt(0)')

    小于索引值:$('tr:lt(2)')

    #、阻止事件冒泡

    stopPropagation()

    #、bind() 方法绑定

    bind(type, [data], fn)

    绑定类型: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, select, submit , keydown, keypress, keyup, error, mousemove, mouseover, mouseout, mouseenter, mouseleave, change

    $('#btn').bind('click', function () {});

    $('.txt').bind('focus', { msg: message }, function (event) { event.data.msg });

  • 相关阅读:
    Redis常见问题及解决方案
    Maven构建报错问题解决
    Nginx正向代理设置
    Linux下限制某程序CPU占用
    Linux-flock文件锁的使用
    Python将print输出内容保存到指定文件中
    使用Zabbix官方模板监控Redis运行状况
    阿里云ossfs配置
    docker swarm 集群及可视化界面的安装及配置
    http://www.fx114.net/qa-24-116329.aspx
  • 原文地址:https://www.cnblogs.com/guofan/p/15951036.html
Copyright © 2020-2023  润新知