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 元素,并将其颜色设置为红色
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 元素