jquery2

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