jQuery

作者: 2016_18点 | 来源:发表于2018-01-20 22:12 被阅读0次
.data(key,value)

存储与匹配元素关联的任意数据

this.$el.data("model", this.model);

('ul li:first') 返回john所在的li。 查找所有ul下第一个li元素("ul li:first-child") 返回 john glen。 查找每个ul下第一个元素是li元素dom元素。
http://www.jb51.net/article/97772.htm


animate()
语法:$(selector).animate(styles,speed,easing,callback)

styles:必需。规定产生动画效果的 CSS 样式和值。
speed:可选。规定动画的速度。默认是 "normal"。
easing:可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback:可选。animate 函数执行完之后,要执行的函数。
animate() 方法执行 CSS 属性集的自定义动画

  1. 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")
  2. 使用 "+=" 或 "-=" 来创建相对动画
$('#id') .css({marginLeft: this.$el.css('marginLeft')})
         .animate({marginLeft: '+=2em'});

attr和prop区别

•对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
•对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
:使用prop方法获取属性则统一返回true和false

官方建议attr(),prop()的使用
camelCase

camelCase函数的功能就是将形如background-color转化为驼峰表示法:backgroundColo


toggle-target data-toggle="collapse"

nextUntil()

功能描述:查找跟随某元素的同胞元素
举例:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

  <dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>


<script>
  $("#term-2").nextUntil("dt").css("background-color", "red");
  var term3 = document.getElementById("term-3");
  $("#term-1").nextUntil(term3, "dd").css("color", "blue");
</script>

</body>
</html>

效果图
div中显示后端传过来的图片
//要使用div标签(不能使用textarea标签)
<div id="description" name="description" class="description-text" ></div>

// 初始化 描述
initDescription: function (model, content) {
   //方法②: 将描述内容的html标签转义,优点:保留了空格、回车等格式、且图片有显示
   var html = model.get('description');
   $('#description').html(html);
},
//可使用textarea标签

//方法①: 将描述内容的html标签转义,缺点:没有保留空格、回车,图片没有显示
    var $textarea = content.$('textarea[name=description]');
    var html = model.get('description');
    $textarea.val($(html).text());
    $textarea.val(html);

width()、innerWidth()、outerWidth()

1 $el.width() = width;
2 $el.innerWidth() = width + padding;
3 $el.outerWidth() = width + padding + border
4 $el.outerWidth(true) = width + padding + border + margin(为true时包含[margin]);

相关文章

网友评论

      本文标题:jQuery

      本文链接:https://www.haomeiwen.com/subject/kzzqsxtx.html