jquery中知识盲点(+)

蔚落 2021-06-26 16:06 261阅读 0赞

## jquery中`css`方法是改变内联样式 ##

事实证明`jquery`中`css`方法是改变内联样式

$("p").css("color","red");

<p style="color: red;">This is another paragraph.</p>

`CSS()`读取和设置内联样式。语法和`attract()`大致一样，宽高的读取和设置可用简写方式`width()、height()`,元素偏移量相对于文本和相对于父元素可分别用`offset()`和`position()`

--------------------

## `jQuery`选择同时包含两个`class`的元素的实现方法 ##

`Jquery`选择器多个`class`属性参照以下案例

1.  交集选择： `$(".a.b")` \--选择同时包含a和b的元素。
2.  并集选择：`$(".a, .b")` \--选择包含a或者包含b的元素。
3.  依次过滤 `$(".good").filter(".list").filter(".Card")`
4.  属性选择 `$("[class='good list card']");`此处顺序必须一致才行  
    最好是用 `$(".good.list.card")`

--------------------

## 使用jQuery的"`.css()`“和”`.attr()`“方法设置元素”`left`"属性的注意点 ##

今天在使用`jQuery`方法"`.css()`“设置”`ajax-loader.gif`“的位置时出了点小状况,关键代码如下(为了简化,这里假定要给”`ajax-loader.gif`“设置的左边距离固定为”`300px`"):

$('#svgLoading').css("left", "300px");

这时,"`ajax-loader.gif`"图片的位置并没有生效! WHY?

很容易地想到另外一种实现方式:

$('#svgLoading').attr("style", "left:300px;");

binggo, 正确!

WHY?难道"`.css()`“和”`.attr()`“在设置”`style`"中的属性时不能等价?自然地,百度, 加google…结果都类似地解释——“css设置style里的样式,attr设置属性”…

最终发现了问题所在:

*  tip1.使用"`.css()`“设置`style`里的样式时,如果是"长度"值,则默认的单位为”`px`",所以不需要,也不能显式地指明单位,否则,设置的样式就会不起作用!
 *  tip2. 使用"`.attr()`"设置`style`里的样式时,如果是"长度"值,则需要,也必须要指明单位,否则,也同样失效!

小结:

error:

$('#svgLoading').css("left", "300px");
    
    $('#svgLoading').attr("style", "left:300;");

right:

$('#svgLoading').css("left", 300);
    
    $('#svgLoading').attr("style", "left:300px;");

--------------------

## `jquery`调用`ajax`方法时候不执行`success`的也不执行`error`的方法 ##

在完成前端向后台异步交互的时候，遇到了这样的一个问题。就是说在发送到后台数据，并且后台已经执行成功该方法的时候。前端并没有执行`success`方法或者`error`方法。这让我非常吃惊。开始的代码如下：

$.ajax({ 
                type: "POST",
                url: "****",
                data: { "urls":urls,
                        "titles" : titles
                    },
                dataType: 'json',
                success: function(data){ 
                    
                     location.reload();
                     console.log(data);
                }
            });

并没有什么问题哈，但是仔细检查后发现：主要原因在于后台返回的数据并非`json`格式，而在代码中指定了 `dataType: "json"`, 解决方法是将 `json`改为`text`。发送和接受的格式保持到一致。

$.ajax({ 
                type: "POST",
                url: "****",
                data: { "urls":urls,
                        "titles" : titles
                    },
                dataType: 'text',
                success: function(data){ 
                    
                     location.reload();
                     console.log(data);
                }
            });

这样就OK了。

--------------------

## `Jquery`获取第一个子元素 ##

如获取`id`为`divId`的`div`下的第一个子`div`

$("#divId").children("div").get(0);
    
    $('#divId').find('div')[0].innerHTML  = "测试";

但得到的是一个`dom`对象，如果要得到`Jquery`对象，要使用

$($("#divId").children("div").get(0))