jQuery对象生成大揭秘，三种神奇方式让你游刃有余

一、创建jQuery对象

说到前端开发，你可能听说过jQuery，这是一款超火的JavaScript工具包，让我们能轻松玩转DOM、处理事件和跟服务器交流数据。要创造个jQuery的“孩子”，就是把HTML元素啊、CSS选择器啊甚至HTML字符串这些东西塞进jQuery这个大口袋里就行！接下来我给大家说说怎么用jQuery造出各种不同类型的对象。

1.通过选择器来创建jQuery对象

用jQuery找出想操作的元素，只需要往里面扔个CSS选择器就行！比如，你想要操作所有的“元素的话，就直接说`$(‘div’)`。搞定之后，就可以随心所欲地操纵它们了。

2.通过HTML字符串来创建jQuery对象

除了选来挑去外，你也能简单地把HTML字符串扔给$()，马上就能得到个jQuery对象了。比如说，`$(

Hello

)`将会创建一个包含”Hello”文本内容的`

var $myDiv = $('#myDiv');  //通过ID选择器获取元素
var $myClass = $('.myClass');  //通过类选择器获取元素
var $myElem = $('div'); //通过元素选择器获取元素，这里是获取所有的
元素

`元素。

3.通过DOM元素来创建jQuery对象

在jQuery函数里传个现成的DOM元素，就能变出相应的jQuery对象。这么弄既省事儿又好用，比如你要是想操控那个叫’myId’的元素，就写成`$(document.getElementById(‘myId’))`就对了。

var $myHtml = $('
Hello, World!
'); //创建一个包含文本的
元素

二、jQuery对象的属性操作

在jQuery里，咱们有很多招儿可以玩转对象的属性！哪些是最常见、实用的？下面就让我来给你说说吧：

var myElem = document.getElementById('myDiv');  //通过id获取DOM元素
var $myElem = $(myElem);  //将DOM元素转换为jQuery对象

1.获取属性值

用`.attr()`方法能看到网页上某些东东的属性值。比如，$(‘img’).attr(‘src’)就是看所有图片来源地址。

2.设置属性值

想要给元素添加属性值？这就用上`.attr()`和`.prop()`！比如说，`$(‘input’).attr(‘disabled’,true)`就能让所有的输入框都失效~

3.移除属性

直接用`.removeAttr()`就能把想要的属性从元素里去掉例如$(‘a’).removeAttr(‘href’)就是把所有链接的链接地址给删了。

var value = $myElem.attr('class'); //获取class属性的值

三、jQuery对象的方法

除了改属性这事儿之外，咱们还能用jQuery搞点啥？就是那种能对对象动手脚的小巧函数。来看看下面这几个常用的吧：

$myElem.attr('title', 'New Title'); //设置title属性的值为'New Title'

1.修改HTML内容

用`.html()`这个神奇的方法，就能轻松搞定元素里头的HTML。比如，你想把id为”content”的元素里头的东西换成“新内容”，就可以这么干：`.html(‘NewContent’)`。

2.获取或设置CSS样式

$myElem.removeAttr('title'); //删除title属性

用`.css()`方法就能改变或者调整元素的外观！比如,$(‘div’).css(‘color’,’red’)这句代码就是让所有的“元素的文字变成红色~

3.添加或删除类

我们常说，用`.addClass()`和`.removeClass()`就像给东西加糖或者拿掉糖一样，可以让你给元素加上想要的类名。试试看，比如`.$(‘p’).addClass(‘highlight’)`这句话就能把’highlight’这个名字的类，全都添到每段文字上。

4.绑定事件

用`.on()`给元素加个动作，比如，`$(‘button’).on(‘click’,function(){提示”按钮被点了!”})`就能让所有的按钮都有这个点击动作用。

学习怎么用jQuery定义对象、操纵特性和使用方法在开发中真的很关键！有了这些技能，你就能更轻松自如地打造出功能强大又有趣的网页应用！

$myElem.html('New HTML content'); //修改HTML内容为'New HTML content'

四、其他常见操作

除了上面说的那些，jQuery还能干好多别的事儿！

翻遍所有：`.each()`这个方法帮你翻阅每个找到的东西，干点儿指定的事。

筛查：用些小技巧，比如:first、:last、:even这些挑选器，就能迅速找出要处理的元素！

$myElem.css('color', 'red'); //将$myElem的文本颜色设置为红色
var color = $myElem.css('color'); //获取$myElem的文本颜色

AJAX：用jQuery的AJAX功能，轻松搞定服务器端数据互动！

用`.animate()`做动画，让网页变得生动起来！

五、总结与展望

$myElem.addClass('highlight'); //添加highligh类
$myElem.removeClass('highlight'); //删除highlight类

这篇文章教你怎样玩转jQuery对象，它在前端开发里挺有用的。学好这个能帮咱们更轻松地用jQuery做Web应用。而且，随着前端技术进步，以后的jQuery也许还会给我们带来更多惊喜，让Web开发变得更简单。

这篇文章会帮你更深入的了解和玩转jQuery，让你能用这些技能搞定实际应用，而且还可以了解更多前端新技能。感谢阅读！

$myElem.click(function() {
    //处理单击事件
});