jquery简介
jquery是js的一个类库，对js中的某些功能进行封装，让dom操作变得简单，使代码简洁，易于使用，且支持链式写法，兼容性好。
jquery的设计思想和主要用法即：选择某个网页元素，然后对其进行一些操作。
jquery的特别之处在于：用jquery获取对应元素后，，它不返回这些对应的元素，返回的都是jquery对象（jquery构造出来的对象），而此对象可以操作这些对应的元素。
jquery能实现的功能js一定能实现，反之则不一定。
令window.jquery = window.$ ，将jquery简写为$。
jquery如何获取元素
将一个选择表达式放进构造函数$()里即可，然后得到被选中的元素。选择表达式可以是css选择器，也可以是jquery特有的表达式。
// css选择器$(document) // 选择整个文档对象$('#xxxid') // 选择id为xxx的元素$('div.xxxclass') // 选择class为xxx的元素$('input[name=first]') // 选择类名属性为first的元素
// jquery特有表达式$('a:first') // 选择网页中第一个a元素$('tr:odd') // 选择表格的奇数行$('#myform:input') // 选择表单中的input元素$('div:visible') // 选择可见的div元素$('div:gt(2)') // 选择所有的div元素，除了前三个$('div:animated') // 选择当前处于动画状态的div元素
jquery如何创造元素
直接将新元素传入jquery构造函数即可。
创建的新元素不会自动插入到页面中，我们还需要明确的指定其插入到页面中的位置。
举个例子：创建一对<h1></h1>标签
$(function(){let $h1 = $('<h1></h1>') // 创建元素h1$('body').append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）}
用div举个例子：
$('div').prepend('') // 给div添加一个大儿子（即添加到最前）$('div').append(选择器/jquery对象) // 给div添加一个小儿子（即添加到最后）$('<h2>xxx</h2>').appendto(选择器/jquery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后
jquery如何移动元素
方法一：直接移动该元素
$('div').insertafter($('p')) // 将元素div移动到元素p后面
方法二：移动其他元素从而使目标函数到达我们想要的位置
$('p').after($('div')) // 把元素p放到元素div前
这两种方法的区别：返回的对象不同。方法一返回的对象是div，方法二返回的对象则是p。
元素不同的移动方式：
.insertafter()和.after() // 在现存元素的外部，从后面插入元素.insertbefore()和.before() // 在现存元素的外部，从前面插入元素.appendto()和.append() // 在现存元素的内部，从后面插入元素.prependto()和.prepend() // 在现存元素的内部，从前面插入元素
jquery如何修改元素属性
使用attr()来修改元素属性及其内容，attr为attribute的缩写，是js中setattribute&getattribute的简写。attr是取值还是赋值，由函数的参数来决定。
举个例子：
$('img').attr('width','100px') // 为属性'width'赋值'100px'
使用方式：
$(selector).attr(attribute) // 返回被选元素的属性值$(selector).attr(attribute.value) // 返回被选元素的属性&值$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值
补充：上述第三种使用方式的意思是：用函数的返回值给属性赋属性值，该函数可接收并使用选择器的index值和当前属性值。举个例子：
$('button').click(function(){ $('img').attr('width',function(n,v){ return v-50; // 点击按钮图片宽度减少50 })})
jquery的链式操作
在选择网页元素后，对其进行一系列操作，并且所有操作都可以连在一起并以链条的形式写出来，这就是jquery的链式操作。
举个例子：$('div').find('h3').eq(2).html('hello');此行代码可以拆分如下
$('div') // 找到div元素 .find('h3') // 选择其中的h3元素 .eq(2) // 选择第3个h3元素 .html('hello'); // 将它的内容改为hello
jquery还提供了后退操作.end()，使得操作结果可以后退一步。
$('div') .find('h3') .eq(2) .html('hello') .end() // 退回到选中所有的h3元素的那一步 .eq(0) // 选中第一个h3元素 .html('world') // 将它的内容改为world
相关视频教程推荐：jquery视频教程
以上就是十分钟搞懂jquery对元素的基本操作的详细内容。