jQuery的基本使用

164 阅读1分钟

1. jQuery如何获取元素

  1. 选择表达式可以是CSS选择器:
$(document) //选择整个文档对象
$('#Id')//选择ID为Id的网页元素
$('div.myClass')//选择class为myClass的div元素
$('input[name=first]')//选择name属性等于first的input元素

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

2. jQuery的链式操作

选中元素后,可以对它进行一系列操作,并且所有的操作都可以连接在一起

$('div').find('#Id2').addClass('red').addClass('blue')

原理是在于每一步的jQuery操作,返回的都是一个jQuery对象,有的是旧对象(调用对象),有的是新对象

3. jQuery创建元素

$()可以直接创建一个元素
let addelement = $('<a href="#"></a>')

4. jQuery如何移动元素

$("#ID1").append(addelement)//在ID1节点末尾添加addelement
$("#ID1").prepend(addelement)//将addelement作为ID1的第一个子节点
$("#ID1").after(addelement)//在ID1节点之后添加addelement
$("#ID1").before(addelement)//在ID1节点之前添加addelement

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

  1. 获取属性
$('#p').attr('class') //获取id为p的标签的class属性值
  1. attr()修改或修改标签的属性值
$('#p').attr('class','red')
  1. 删除某个属性
$('#p').removeAttr('name')
  1. 添加class名称
$('#p').addClass('blue')
  1. 删除class名称
$('#p').removeClass('yellow')
  1. 有class就删除,没有就添加
$('#p').toggleClass('green')
  1. val()获取输入框的内容
let s= $('input[name="user"]').val()