使用Jquery检索元素

我希望能够仅通过其附加属性获取页面上的任何元素。例如，在一个页面上

 <div id="divId" name="john" style="background-color: red;">
This is alot of text
</div>

这将输出“严重终止”

我想将这种方法应用到我的原始div中，所以我已经尝试过了

 var e1 = $("div[name='" + 'john' + "']" ).html()
     e1.style.backgroundColor = "lightblue";

这是返回未定义的…我知道有其他方法获取元素，但我想通过这种方式了解我做错了什么

---

谢谢

您的代码中有两个问题

首先是使用

.html（）

获取html，它返回实际的html文本，而不是元素，因此无法对其进行样式设置

下面的方法可以解决这个问题

var e1 = $("div[name='" + 'john' + "']" ).get(0);
    e1.style.backgroundColor = "lightblue";

此外，您还可以使用

.css

jquery方法来设置元素的样式

var e1 = $("div[name='" + 'john' + "']" );
    e1.css({
             'background-color': "lightblue"
           });

最后，如果您不想将自己仅限于

div

元素，只需从选择器中删除div即可

var e1 = $("[name='" + 'john' + "']" )

---

它将选择所有具有

name

属性且

john

作为其值的元素。

首先，您不必要地将信息连接在一起。你应该这样做：

var e1 = $("div[name='john']" ).html()

只有当您将一个变量放置在选择器中的某个位置时，才真正需要连接，而您没有这样做。也不需要

.html（）

，因为这将获得div的html内容，您只需要更改元素的CSS

var e1 = $("div[name='" + 'john' + "']" );
    e1.css({
             'background-color': "lightblue"
           });

其次，此时

e1

是一个jQuery对象，因此尝试使用普通的vanialla JavaScript访问属性将在以下情况下失败：

e1.style.backgroundColor 

您可以使用

.get（0）

或

[0]

取消对jQuery对象的引用并访问底层节点，如：

e1[0].style.backgroundColor

或

但正确的方法是继续使用jQuery方法，如本例中的

.css（）

：

e1.css('backgroundColor', 'lightblue'); 

例如：

var e1=$（“div[name='john']））
//e1.get（0.style.backgroundColor='lightblue'；
//e1[0].style.backgroundColor='lightblue'；
e1.css（‘背景色’、‘浅蓝色’）

这是大量的文本
可以非常简单，使用变量按数据属性选择：

   var mychoice = "North America";
   var mything =$('*[data-continent="' + mychoice + '"]');

与任何属性相同
html（）
返回一个字符串，而不是dom元素，所以最后一个肯定不起作用
e1.css('backgroundColor', 'lightblue'); 

   var mychoice = "North America";
   var mything =$('*[data-continent="' + mychoice + '"]');