jQuery----语法

一.Dom元素类操作

<style>
        .red0 {
    
    
            color: red;
        }
        .red1{
    
    
            color: deeppink;
        }
        .red2{
    
    
            color: deepskyblue;
        }
    </style>
</head>
<body>
<button class='btn red0'>按钮</button>
<button class='btn red1'>按钮</button>
<button class='btn red2'>按钮</button>
</style>

添加类

$(’.btn’).addClass(‘red’);
$(’.btn’).addClass(function (index){
return ‘red’+index;
});

删除类

$(’.btn’).removeClass(‘btn’);
$(’.btn’).removeClass(function (index){
return ‘red’+index;
})

类别切换

true 代表添加
false 代表删除
$(’.btn’).toggleClass(‘btn-list’,false);
1.索引 2.原始类
$(’.btn’).toggleClass(function (index,cs){
return ‘list’+index;
},false);

hasClass() 检测元素是否具有某个类 true false

console.log($(’.ipt’).hasClass(‘ipt’));
$(’.ipt’).val(123);

二. Html元素值操作

<button class="btn"><span>按钮</span></button>
<input type="text" class="ipt" value="请输入..."/>

html元素的文本内容值操作 html text val

console.log($(’.btn’).html());

console.log($(’.btn’).text());

console.log($(’.ipt’).val());

设置直接写值 fn

var str = ‘< h3>按钮< /h3>’;
$(’.btn’).html(str);
$(’.btn’).text(str);
$(’.ipt’).val(‘1234’)
//
$(’.btn’).html(function (index){
console.log(index);
return ‘< p>文本</ p>’+index;
});
$(’.btn’).text(function (index){
console.log(index);
return ‘< p>文本</ p>’+index;
});
$(’.ipt’).val(function (index) {
console.log(index);
return ‘value’;
})

hasClass() 检测元素是否具有某个类 true false

HTML代码/文本/值
html([val|fn])
text([val|fn])
val([val|fn|arr])**

三. 节点操作

尺寸

height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])

位置

offset([coordinates]) 相对视口的偏移
position() 相对父元素的偏移
scrollTop([val])
scrollLeft([val])

文档处理

dom元素子父节点
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)

外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

包裹

wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)

替换

replaceWith(content|fn)
replaceAll(selector)

复制

clone([Even[,deepEven]]) 参数是true false 一个参数代表两个 true 事件处理函数被复制子元素被复制

删除

empty() 删除元素的所有的子节点
remove([expr]) dom元素的事件删除
detach([expr]) dom会保留事件

示例：

<button class="btn">按钮</button>
<button class="btn  list">按钮</button>
<button class="btn">按钮</button>

内部插入

1.追加到内容之后

    var str='abc';
    后边的参数  可以是字符串  也可以是对象
    $( '.btn').append(str);
    $(' < span> abc < /span >').appendTo($('.btn'));
   
    var str='< span>123</ span>';
    $(str). appendTo ($('.btn'));  //**前面不能是字符串**
    $('< div></ div>');

2.追加到元素的内容之前 prepend / prependTo

var str='abc';
$('.btn').prepend(str);
$(str).prependTo($('.btn'));
$('<div>123</div>').prependTo($('.btn'));
    console.log($(str));

外部插入

   var str=$('< span>标签</ span>');
    $('.btn').after(str);
    $('.btn').before(str);
    
  var str=$('< span>标签</ span>');
  str.insertAfter($('.btn'));
  str.insertBefore($('.btn'));

元素包裹

   $('.btn').wrap('< div></ div>');
   $('.btn').wrap($('< div></ div>'));
   $('.btn').wrap(function (index){
    
    
       return $('< div></ div>');
    });

1.移除包裹元素

   $('.btn').unwrap();
   $('.btn').wrap('<div></div>');
   找到的同类元素全部包起来
   $('.btn').wrapAll('<div></div>');

2.找到的同类元素全部包起来

$('.btn').wrapAll('<div></div>');

3.把元素的字内容全部包起来

$('.btn').wrapInner('<div></div>');

元素替换

    $('.btn').replaceWith('<div>123</div>');
    $('<div>123</div>').replaceAll($('.btn'));

元素克隆

$('body').append($('.btn').clone());

清除所有子节点

  var button=$('.btn');
    button.click(function (){
    
    
        console.log(1);
    });
    //button.remove();  //全部删除
    button.detach();
    //$('.btn').remove('.list');
    button[0].click();

一.Dom元素类操作

二. Html元素值操作

三. 节点操作

猜你喜欢