目录

  • 一、jQuery如何获取元素
  • 二、jQuery的链式操作是怎么样的
  • 三、jQuery如何创建元素
  • 四、jQuery如何移动元素
  • 五、jQuery如何修改元素

    一、jQuery如何获取元素

    有两种方法
    第一种使用CSS选择表达式方式：
  1. // 选择整个文档的元素
  2. $(document)    
  4. // 选择ID为myID的网页元素
  5. $('#myId')    
  7. // 选择class为myClass的div元素
  8. $('div.myClass') 
  10. // 选择name属性等于first的input元素
  11. $('input[name=first]')

第二种使用jQuery的表达式（https://api.jquery.com/category/selectors/）:

  1. //选择网页中第一个a元素
  2. $('a:first') 
  4. //选择表格的奇数行
  5. $('tr:odd') 
  7. // 选择表单中的input元素
  8. $('#myForm :input') 
  10. //选择可见的div元素
  11. $('div:visible') 
  13. // 选择所有的div元素，除了前三个
  14. $('div:gt(2)') 
  16. // 选择当前处于动画状态的div元素
  17. $('div:animated')

二、jQuery的链式操作是怎么样的

链式操作简单来说就是直接在前面语句后面接着使用 . 来连接

  1. $('div').find('h3').eq(2).html('Hello')

上面这句话等于

  1. // 找到div元素
  2. $('div') 
  4. // 选择其中的h3元素
  5. $.find('h3') 
  6. // 选择第3个h3元素
  7. $.eq(2)
  9. // 将它的内容改为Hello
  10. $.html('Hello')

这么对比后是不是发现链式操作方便了很多

三、jQuery如何创建元素

在jQuery中创建元素只需要将html代码直接输入到参数内即可

  1. $('<div>111</div>')
  3. $('<li class="new">new list item</li>')
  5. $('ul').append('<li>list item</li>')

四、jQuery如何移动元素

具体方法是
选择元素+操作方法+目标元素
具体操作方法有以下几种：

  1. 在现存元素的外部，从后面插入元素
  2. .insertAfter()和.after()
  4. 在现存元素的外部，从前面插入元素
  5. .insertBefore()和.before()
  7. 在现存元素的内部，从后面插入元素
  8. .appendTo()和.append()
  10. 在现存元素的内部，从前面插入元素
  11. .prependTo()和.prepend()

例如：
将div元素移动到p元素后面

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

五、jQuery如何修改元素

获取元素的值

  1. // html()不带参数为取值
  2. $('h1').html()

向元素赋值

  1. // html()带参数为赋值
  2. $('h1').html('Hello')

复制元素

  1. // 格式为 需要复制的元素+.clone().appendTo+目标位置    
  2. $( ".hello" ).clone().appendTo( ".goodbye" )

删除元素

  1. // 直接在输入你要删除的元素节点+remove即可
  2. $( ".hello" ).remove()