干货web前端/后端开发工作中不得不知的jq要点

Posted 2021-05-01 多钛

1. jQuery 效果 - animate() 方法

改变 "div" 元素的高度：

    $(".btn1").click(function(){      $("#box").animate({height:"300px"});
    });

定义和用法:

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selector).animate(styles,speed,easing,callback)

（补充：1em=16px -- 12px=0.75em,10px=0.625em。）

语法 2

$(selector).animate(styles,options)

• styles 必需。规定产生动画效果的 CSS 样式和值（同上）。

• options 可选。规定动画的额外选项。

可能的值：

• speed - 设置动画的速度

• easing - 规定要使用的 easing 函数

• callback - 规定动画完成之后要执行的函数

• step - 规定动画的每一步完成之后要执行的函数

• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始

• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

2.CSS3 opacity 属性

语法

opacity: value|inherit;

• value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

• inherit 应该从父元素继承 opacity 属性的值。

3.关于append

$dl = $(".ybcun").find("dl"),

$dl2 = $(".ybctj").find("dl"),

dd = document.createElement("dd"),

html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'dd.innerHTML = html;$dl.append(dd);$dl2.append(dd);

//这样追加内容的话，dl会添加失败。相同， 如果改成 先执行$dl2.append(dd); 在执行$dl.append(dd);的话， dl2会添加失败；

解决方法：

html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'dd.innerHTML = html;$dl.append(dd);

//重新定义一个对象

dd2 = document.createElement("dd"),dd2.innerHTML = html;

$dl2.append(dd2);

//这样追加 新的对象就不会出现上面的问题

4.JQuery给元素绑定click事件多次执行的解决方法

原绑定方法：

$("#sdfsd").on("click",function(e){ ***** });

这种方法只会在原click方法中继续添加新方法；

解决办法更改绑定方法为：

$("#sdfsd").unbind("click").click(function(e){ ***** });

在绑定新click方法前对元素所绑定的click方法解绑

5.js冲突问题：

$(".x").load("")加载页面时，防止加载的页面与父页面的js冲突

此处意思是：load的页面中引用的js可能会和父页面中的js冲突，例如，load的页面中引用了jq库，父页面中同样引用了jq库，此时就可能发生js文件冲突，所以使用load的时候要注意。

6.判断数据返回类型（js判断undefined类型）--typeof

var id = $(this).attr("id").substring(0,9);

这个看似没问题，但如果当前标签下不存在id属性， 那么$(this).attr("id")就会返回一个undefined，此时.substring就会抛异常，（.substring为截取字符串，显然undefined不是一个有效的字符串）

这时就要使用typeof判断：

var idStr = $(this).attr("id");    //判断是否能获取到id（    //typeof 返回的是字符串，有六种可能："number"、"string"、       "boolean"、"object"、       "function"、"undefined"）    if(typeof(idStr) == "undefined"){    }else{       var id = idStr.substring(0,9);       $("#favoriteId").val(id);    }

7.禁用css样式

<script type="text/javascript">    $(function(){      // 禁用css样式          // resetCss为css的文件的id,<link ... id = "resetCss">      //document.getElementById("resetCss").disabled = true;        $("#resetCss").attr("disabled",true);    })</script>