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())}