JQuery的简单功能

XiucungLee
254 阅读2分钟

选取HTML元素

JQuery的基本用法是选择某个HTML元素，接着对其进行各种操作，所以选取HTML元素是使用JQuery的第一步，也是最基本的功能。我们在使用JQuery给其起了个简短的别名$，所以在使用JQuery选取HTML元素的时候代码也很简洁，只要将选择表达式放进构造函数$()里，就能得到被选取的元素。

基础用法

  • $("element") 根据元素名匹配元素
  • $("#id") 根据id匹配元素
  • $(".class") 根据类名匹配元素

元素的创建

基础用法

把要创建的HTML元素表达式传入JQuery的构造函数即可。

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

实现思路

元素的选取和元素的创建的用法一样，都是$('内容')的形式，这里用到了方法重载的思路，根据传入参数的不同，执行不同的代码。大致思路是判断传入的参数是否以"<"开头，如果以"<"开头则判断为接下来的字符串是HTML标签，用户的意愿是要创建一个元素，否则用户是想选取一个元素。伪代码如下:

    if(string ==='<'){
        string是HTML标签，创建元素
    }else{
        string是选择器，选取元素
    }

链式操作

JQuery支持多个对元素的操作用点运算符连接起来，达到用一条语句对元素进行多次操作的效果。

基础用法

$('div').find('#test').addClass('red') 在所有的div元素中查找id为test的元素，给这些元素加上'red'类。

在链式操作中，还可以通过end()回到最近的一次改变匹配元素的操作之前的状态。 $('div').find('#test').addClass('red') 此时匹配的元素为div>#test，修改一下代码，$('div').find('#test').end().addClass('red') ，'red'类将被加到所有div元素上。

实现思路

在每次方法执行完后返回this对象，然后后面的方法就可以继续在this环境下执行，链式地操作同一个元素。

元素查找操作

  • $('#xxx').find('red')查找id为xxx元素里的类为'red'的子元素
  • $('#xxx').parent()获取爸爸
  • $('#xxx').children()获取儿子
  • $('#xxx').siblings()获取兄弟
  • $('#xxx').index()获取元素在父元素中的下标
  • $('#xxx').next()获取下一个兄弟元素
  • $('#xxx').prev()获取上一个兄弟元素
  • $('.red').each(fn)遍历所有类为'red'的元素并执行fn

增加

  • $('body').append('<div>1</div>')在子元素最后追加子元素
  • $('body').prepend('<div>1</div>')在第一个子元素前面插入子元素
  • $('#test').after()增加一个弟弟元素
  • $('#test').before()增加一个哥哥元素

删除

  • $div.remove() 删除选中的元素以及其所有子节点
  • $div.empty() 删除被选中元素的子节点，保留原节点

赋值

  • $('#xxx').html('<div>hello</div>') 设置元素的innerHTML
  • $('#xxx').text('hello') 设置元素的文本内容(innerText)
  • $('#xxx').attr('name','value')设置name的值为value
  • $('#xxx').css('key','value')设置被选中元素的style属性值
  • $('#xxx').addClass('blue')给元素增加类
  • $('#xxx').on('click',fn)给元素增加点击事件

取值

  • $('#xxx').html()取出被选中元素的html内容
  • $('#xxx').text()取出被选中元素的文本内容(不包括HTML标签)
  • $('#xxx').attr('name')取出某个属性的值
  • $('#xxx').css('key')取出被选中元素style属性key对应的值

元素移动

要达到元素的移动有两种方法，一种是直接移动该元素，另一种是移动其他元素，使得目标元素达到想要的位置。 假如选中了一个div，要把它移动到p元素后面：

$('div').insertAfter($('p'))
把div移动到p后面

$('p').after($('div'))
把p加到div前面

使用这种模式的操作方法，一共有四对：

  • .insertAfter()和.after()：在现存元素的外部，从后面插入元素
  • .insertBefore()和.before()：在现存元素的外部，从前面插入元素
  • .appendTo()和.append()：在现存元素的内部，从后面插入元素
  • .prependTo()和.prepend()：在现存元素的内部，从前面插入元素
avatar
文章
阅读
粉丝