美文网首页
jQuery设计思想

jQuery设计思想

作者: lin_lilili | 来源:发表于2020-10-10 19:38 被阅读0次

    1 jQuery 如何获取元素

    • jQuery获取选择器对应的元素对象,返回可操作对象.
    • 利用操作对象的原型对象上的api进行操作元素对象.

    1.1 使用CSS的选择器模式获得元素.

    $('selector')

    1.2 使用自定义模式获得元素

    $('a:first') //选择网页中第一个a元素
    
    $('tr:odd') //选择表格的奇数行
    
    $('#myForm :input') // 选择表单中的input元素
    
    $('div:visible') //选择可见的div元素
    
    $('div:gt(2)') // 选择所有的div元素,除了前三个
    
    $('div:animated') // 选择当前处于动画状态的div元素
    

    1.3 使用内置过滤器,获得元素

    $('div').has('p'); // 选择包含p元素的div元素
    
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    
    $('div').first(); //选择第1个div元素
    
    $('div').eq(5); //选择第6个div元素
    

    1.4 结果集二次选择

    $('div').next('p'); //选择div元素后面的第一个p元素
    
    $('div').parent(); //选择div元素的父元素
    
    $('div').closest('form'); //选择离div最近的那个form父元素
    
    $('div').children(); //选择div的所有子元素
    
    $('div').siblings(); //选择div的同级元素
    

    2 jQuery 的链式操作是怎样的

    • 为了获得链式对象,将函数中的结果集再次传入$(result)中二次封装.
    • 这样新的jQuery对象就可以进行链式操作.

    2.1 使用end(),让结果集后退到上一次的jQuery对象.

    3 jQuery 如何创建元素

    $(),可以传入数组,选择器,以及HTML代码创建对象.

    • 这里使用了重载模式

    3.1 jQuery 创建对象

    • $('<div>1</div>')

    4 jQuery 如何移动元素

    • .insertAfter()和.after():在现存元素的外部,从后面插入元素
    • .insertBefore()和.before():在现存元素的外部,从前面插入元素
    • .appendTo()和.append():在现存元素的内部,从后面插入元素
    • .prependTo()和.prepend():在现存元素的内部,从前面插入元素
    //以下效果相同
    $("<span>Hello World!</span>").appendTo(".p1");
    $(".p2").append(" <b>插入文本</b>.");
    

    5取值与赋值统一api.

    • 使用了可读即可写
    .html()   //取出或设置html内容
    
    .text()  //取出或设置text内容
    
    .attr()  //取出或设置某个属性的值
    
    .width() //取出或设置某个元素的宽度
    
    .height() //取出或设置某个元素的高度
    
    .val()  //取出某个表单元素的值
    
    

    相关文章

      网友评论

          本文标题:jQuery设计思想

          本文链接:https://www.haomeiwen.com/subject/vipjpktx.html