position
offset()
通過offset 設置位置偏移
$('#d1').offset({top:100,left:300})
jQuery.fn.init [div#d1]
通過offset 找位置
$('#d1').offset()
{top: 100, left: 300}
值設置
$('input[name=sex]').val(['1'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('input[name=sex]').val(['2'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$(':radio').val(['1'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$(':radio').val(['2'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$(':checkbox').val(['1','2'])
jQuery.fn.init(4) [input, input, input, input, prevObject: jQuery.fn.init(1)]
$(':checkbox').val()
"1"
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]0: input1: input2: input3: optionlength: 4prevObject: jQuery.fn.init [document]__proto__: Object(0)
$(':checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
屬性操作
$('#d1').attr('age','18')
jQuery.fn.init [div#d1]
$('#d1').attr('age')
"18"
$('#d1').attr({'k1':'v1','k2':'v2'})
jQuery.fn.init [div#d1]
$('#d1').removeAttr('age')
jQuery.fn.init [div#d1]
$(':checkbox')
jQuery.fn.init(3) [input, input, input, prevObject: jQuery.fn.init(1)]
$(':checkbox').eq(0).attr('checked','checked');
jQuery.fn.init [input, prevObject: jQuery.fn.init(3)]
$(':checkbox').eq(0).attr('checked');
"checked"
$(':checkbox').eq(1).attr('checked');
undefined
$(':checkbox').eq(1).prop('checked');
false
$(':checkbox').eq(0).prop('checked');
true
$(':checkbox').eq(1).prop('checked',true);
jQuery.fn.init [input, prevObject: jQuery.fn.init(3)]
$(':checkbox').eq(1).prop('checked',false);
jQuery.fn.init [input, prevObject: jQuery.fn.init(3)]
文檔操作
內部元素的后面
第一種寫法
var a = document.createElement('a')
undefined
a
<a>•</a>
$(a).attr('href','http://www.baidu.com')
jQuery.fn.init [a]
a
<a href=•"http:•/•/•www.baidu.com">•</a>•
$(a).text('百度')
jQuery.fn.init [a]
a
<a href=•"http:•/•/•www.baidu.com">•百度•</a>•
$('#d1').append(a)
jQuery.fn.init [div#d1]
第二種寫法
$(a).appendTo('#d1')
擴展寫法:重點
$('#d1').app
undefined
$('#d1').append('<a href="http://www.baidu.com">百度</a>')
jQuery.fn.init [div#d1]
var a = document.createElement('a')
undefined
$(a).attr('href','http://www.baidu.com')
jQuery.fn.init [a]
$(a).text('百度')
jQuery.fn.init [a]
用a替換前面的元素
$('#d1').replaceWith(a)
jQuery.fn.init [div#d1]
$(a).replaceAll('#d1')
clone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn">屠龍寶刀,點擊就送</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.btn').click(function () {
var btnClone = $(this).clone(true); //
$(this).after(btnClone);
})
</script>
</body>
</html>
今日內容回顧
位置操作
offset() 獲取相對於整個document的位置,按照左上角來看,
設置位置:offset({left:200,top:200})
position
scrollTop 滾輪往下移動了多少了
用法:$(window).scroll(function(){
console.log($(window).scrollTop())
})
設置值:
$(window).scrollTop(100) 將滾輪移動到100的位置
scrollLeft
尺寸:
height content的高度
width content的寬度
innerHeight content + 兩個padding
outHeight content + 兩個padding + 兩個border
文本操作
.html() 獲取標簽和文本
.text() 獲取文本
.html('xxx') 識別標簽
.text('xxx')
值操作
val()
input type=text 對象.val()
input type=radio 選中對象.val()
select select標簽對象.val()
設置值
input type=radio 對象.val(['1']) 對應着value屬性的值
select select標簽對象.val('1') 多選照樣是數組,
input type='checkbox'
選中對象.val() $(':checked') 注意他會將select標簽選中的標簽也算上,想看多個值需要循環
屬性
設置
attr('age','18')
attr({'age':'18','name':'chao'})
查看
attr('age')
刪除
removeAttr('age')
prop() 用在input(type:radio,checkbox),select
prop('checked') true--false
設置
想設置選中的input標簽對象.prop('checked',true)
取消選中:.prop('checked',false)
文檔處理
$('div').append(a) 將a添加到div內部的后面
$(a).appendTo('div') 將a添加到div內部的后面
$('div').prepend(a) 將a添加到div內部的前面
$(a).prependTo('div') 將a添加到div內部的前面
after
before
替換
$(a).replaceWith(p) //p替換a
$(a).replaceAll(p) // a 替換的p
清空和刪除
empty() 清空標簽中的所有內容,但是標簽還在
remove() 刪除整個標簽
克隆clone
.clone()
帶事件克隆
.clone(true)
事件:
綁定事件的兩種方式
標簽對象.click(function(){})
標簽對象.on('click',function(){})
input事件只能用on綁定
常用事件
click
hover
對象.hover(
1.鼠標進入
function(){},
2.鼠標移出
function(){}
)
blur //光標離開
focus //失去焦點 光標離開
change //select改變元素
mouseenter
mouseover
mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示鼠標進入這個對象
keyup,keydown
$(window).keyup(function(e){
e.keyCode; e為事件對象,keyCode是獲取用戶按下了哪個鍵,數字表示
})
注意scroll 和 scrollTop
一個是綁定事件 一個是 位置操作方法
文本操作 text() 和 html()的區別 (text顯示標簽 html 不顯示標簽）
text()// 取得所有匹配元素的內容，只有文本內容，沒有標簽
text(val)// 設置所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去
html()// 取得第一個匹配元素的html內容，包含標簽內容
html(va；l)// 設置所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果
特別注意 ：$(':radio:checked').val() （注意 radio + 選中）的val
$('input[name=sex]').val(['2']) （注意在代碼中的value=‘1‘ 不要有空格）
for (var i=0;i< $(':checkbox:checked').length;i++){console.log($(':checkbox:checked').eq(i).val())}