jQuery的一些操作

Posted 2021-02-04 hhl6

下面介绍jQuery属性操作：

.val()

这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值。

$(‘input‘).val()

$(‘input‘).val(‘newValue‘);

.attr()

.attr(attributeName)

获取元素特定属性的值

var title = $( "em" ).attr( "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )

为元素属性赋值

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

.removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）

$(‘div‘).removeAttr(‘id‘);

.prop()

用来操作元素的property的

.css()

这是个和attr非常相似的方法，用来处理元素的css

.css(propertyName) / .css(propertyNames)

获取元素style特定property的值

var color = $( this ).css( "background-color" );

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )

设置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

.addClass()

.addClass(className) / .addClass(function(index,currentClass))

为元素添加class，不是覆盖原class，是追加，也不会检查重复。原生JS只能为单个对象添加class，而Jquery可以同时为多个对象添加class。

$( "p" ).addClass( "myClass yourClass" );

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

 

.removeClass()

removeClass([className]) / ,removeClass(function(index,class))

移除元素单个/多个/所有class

$( "p" ).removeClass( "myClass yourClass" );

$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

.hasClass()

检查元素是否包含某个class，返回true/false

$( "#mydiv" ).hasClass( "foo" )

.toggleClass()

toggle是切换的意思，方法用于切换，switch是个bool类型值

下面介绍一些jQuery的常用方法

.each()

.each( function(index, Element) )

遍历一个jQuery对象，为每个匹配元素执行一个函数          //当不能判断函数中的参数是什么的时候，可以在函数第一项中输入console.log(arguments)，在结果中进行查看

$( "li" ).each(function( index ) {
  console.log( index + ":" + $(this).text() );
});

 

$.extend()

1. 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

2. 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

 

.clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果

$(‘.hello‘).appendTo(‘.goodbye‘);

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
但是我们如果需要的是复制而不是剪切，我们可以像下面这样写代码：

$(‘.hello‘).clone().appendTo(‘.goodbye‘);

 

.index()

从给定集合中查找特定元素index

1. 没参数返回第一个元素index

2. 如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index

3. 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

.ready()

当DOM准备就绪时，指定一个函数来执行。当把script放在head中，由于页面的dom并未加载，所以JS操作不能执行，这时候如果在script中这样写

$(function(){
    //JS的内容
})
相当于
$(document).reday(function(){
    //JS的内容
})
或者
document.onDOMContentLoaded