jquery中知识盲点(+)

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属性参照以下案例

 <label class="a b good list card">

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))