jQuery

105 阅读1分钟

1. jQuery 如何获取元素

jQuery获取的方法有两种,一种是通过jQuery 选择器来选择元素,可以直接获取单个或批量的元素;另一种是通过jQuery 遍历相关来选择元素,这种方法常用在获取层级较复杂的页面中的元素。

jQuery选择器

       $(document) //选择整个文档对象
       $('*')      // 选择所有标签元素
       $('#demo')  //选择 id 为 demo 的元素
       $('.demo')  //选择 class 为 demo 的所有元素
       $('div')    // 选择所有 div 标签元素
       $('.arr.arr-left')     // 选择同时具有 arr 和 arr-left 类名的元素 
       $('input[name=first]') // 选择 name 属性等于 first 的 input 元素

jQuery遍历函数

find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

实例
$("p").find("span").css('color','red') //搜索所有段落中的后代 span 元素,并将其颜色设置为红色

jQuery 遍历参考手册

2. jQuery 的链式操作是怎样的

jQuery 链式操作

jQuery要先创建好对象,然后调用自己的方法。链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回来,对象就可以继续调用方法,实现链式操作

$.jQuery('#test')
    .find('.child')
    .addClass('red')
    .end()
    .addClass('yellow')

$('#test') //找到id="test"元素
   .find('.child') //选择其中class="child"的元素
   .addClass('red')//添加className:'red'
   .end() //返回到第一步
     .addClass('yellow')//添加className:'yellow',此时className只有yellow

3. jQuery 如何创建元素

直接把新元素传入到jQuery构造函数即可

$('<p>Hello</p>');

  $('<li class="new">new list item</li>');

  $('ul').append('<li>list item</li>');

4. jQuery 如何移动元素

如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。

假定我们选中了一个div元素,需要把它移动到p元素后面

第一种方法是使用 .insertAfter() 把div元素移动p元素后面:

    $('div').insertAfter('p');

第二种方法是使用.after(),把p元素加到div元素前面:

      $('p').after('div')

5. jQuery 如何修改元素的属性

jQuery的 增、删、改、查

 查
       $(#xxx)  //返回值并不是元素,而是一个 api 对象
       $(#xxx').find(.red)//查找 #xxx 里的 .red 元素
       $(#xxx').parent() //获取爸爸
       $(#xxx').children() //获取儿子
       $(#xxx').siblings() //获取兄弟$(#xxx').index0 获取排行老几 (从0开始)
       $(#xxx).next() //获取弟弟
       $(#xxx).prev0 //获取哥哥
       $(.red').each(fn) //遍历并对每个元素执行 fn
增
       $('<div><span>1</span></div>').divappendTo(document.body) //创建'<div><span>1</span></div>'插入到 body 中$div.remove()
       $div.empty()
改
       $div.text(?) 读写文本内容
       $div.htmI(?) 读写 HTML 内容
       $div.attr('title',?) 读写属性
       $div.css({color:'red) 读写 style
       $div.addClass('blue')
       $div.on('click', fn)
       $div.off('click', fn)
注意
 $div 大部分时候对应了多个 div 元素