html用于获取第一个匹配元素的HTML内容或文本内容
/* html用于设置所有匹配元素的HTML内容或文本内容 */
/* text用于获取所有匹配元素的文本内容 */
/* text用于设置所有匹配元素的文本内容 */
console.log( $('div').html() );
/* text只能打印出文字,不能打印出标签 */
console.log( $('div').text('<h1>123</h1>') );
获取表单的值
$('button').click(function(){
console.log($('input').val());
})
基本操作和获取值
if($(this).hasClass('div1')){
$(this).removeClass('div1')
}else{
$(this).addClass('div1')
}
}
$('div').mouseover(function(){
fn.call(this)
})
$('div').mouseout(function(){
fn.call(this)
})
hover只写一个方法,鼠标移入和移出都会执行一次
$(this).toggleClass('div1')
})
$('div').click(function () {
$('input').val($('div').text().trim())
})
节点操作1
通过选择器获取节点
把DOM节点转化成jQuery节点
/* let div1=document.getElementsByTagName('div')[0]
console.log($(div1)); */
使用HTML字符串创建jQuery节点
let h1=$('<h1 style="color:red">我爱H1</h1>');
console.log(h1);
html传的是字符串
$('div').html(h1)
/* let h1=document.createElement('h1');
h1.innerText='我爱中国';
console.log(h1);
document.querySelector('div').innerHTML=h1.innerHTML */
节点操作2
<button class="b1">在内部在上面添加</button>
<button class="aa">向后生成头像</button>
<button class="bb">向前生成头像</button>
$('.b1').click(function(){
$(a).prepend(b) 表示将b前置插入a中
$('ul').prepend('<li>我是li的前端</h1>')
$(b).prependTo($(a)) 表示将b前置插入a中
})
$('.a1').click(function(){
原生只能插入节点
(a).append(b) 将b插入a中
$('ul').append('<li>我是li</li>');
//$('<li>我是li</li>').appendTo($('ul'));
})