2、事件机制、DOM操作、jquery对尺寸操作、jquery添加和删除

一、事件机制

1、事件源.事件类型(事件处理程序)

$(this)中的this不能加引号

$('#box').click(function () {
  $(this).css('background-color','blue')//点击颜色变为蓝色
})复制

2、事件源.on/bind(事件类型，事件处理程序)

$("#box").on('dbclick',function () {
  $(this).css('border-radius','100px')
})复制

$('#box').bind('mouseover',function () {
  $(this).csss('font-size','60px')
})复制

3、事件源.on/bind({事件类型1：事件处理程序1，事件类型2：事件处理程序2，}）

$('#box').on({ //用on或bind
  mousedown: function () {//按下鼠标
    console.log("鼠标按下了")
  },
  mouseup: function () {//抬起鼠标
    console.log("鼠标抬起了")
  }
})复制

区别.on()与.bind()：

• 与 .bind() 不同的是，.on() 方法可以附加额外的参数，如可选的选择器，用于对事件目标进行过滤。这样，您可以只在满足选择器条件的元素上触发事件处理程序。

4、事件对象

event不用考虑兼容性 输出必须要event.属性

$("#box").on({
  mouseenter: function () {
//MouseEvent {isTrusted: true, screenX: 168, screenY: 178, clientX: 127 …}
    console.log(event)
    console.log('pageX:' + event.pageX)//距离浏览器左边的横坐标 包括滚动条卷去的
    console.log('clientX:' + event.clientX)//距离浏览器左边的横坐标
  },
})复制

$('#user').bind('keyup', function () {
  console.log(event);
  //如果按下enter就跳转页面
  if(event.keyCode == 13 && event.key == 'Enter') {
    window.location.href = "https://www.***.com"
  }
})复制

5、each() 函数用于遍历的对象和数组。

$('#btn').click(function () {
    console.log($("ul>li"));
  $('ul>li').each(function () {
    console.log($(this).text()// 输出每个列表项的文本内容
  })
})复制

6、jQuery.each(数组/对象,回调函数(key,value)) 遍历数组或者对象

遍历数组

var arr = ['web', '前端']
//遍历数组   key  value也可以
$.each(arr, function (index, item) {
//数组的索引是0，值是web 数组的索引是1，值是前端 
  console.log('数组的索引是' + index + '，值是' + item)
})复制

遍历对象

var obj = { name: "小明", age: 20, sex: "男" }
$.each(obj, function (index, item) {
//属性名：name，属性值：小明  属性名：age，属性值：20  属性名：sex，属性值：男
  console.log("属性名：" + index + "，属性值：" + item)
})复制

二、DOM操作

1、 html()获取或设置被选元素的所有节点

• 相当于innerHTML

console.log($('#box').html());
//<p>哈哈哈</p>   <!-- 我是注释 -->  都可以获取到
$("#btn").on('click',function(){
  $("#box").html("<a>我是超链接</a><!-- 我是注释的升级版 -->")
})复制

2、text()设置或返回所选元素的内容

• 相当于innerText

console.log($('#box').text())//返回内容
$('#btn').bind('mouseover', function () {
   $('#box').text('段落标签')//改变内容为段落标签
})复制

3、val()设置或返回表单字段的值

<input type="text" id="user" value="我是输入框的文本">
console.log($('#user').val())//返回 我是输入框的文本
$('#user').on({
  click: function () {
    $(this).val('web31')//点击以后  值变为 web31
  }
})复制

4、attr()、prop()获取或者设置被选元素的属性，参数是属性名和属性值

区别1：

• attr() 不仅可以获取和设置元素的本身属性和设置元素的自定义属性
• prop()只能设置元素的本身属性

区别2：

• 表单中的一些属性disabled/selected/checked用prop()

<p class="text" name_1="proName">我是盒子box中的段落文本text</p>
console.log($('.text').attr('class')) //text  获取类名为text的class为
console.log($('.text').prop('class')) //text  获取类名为text的class为
//proName  获取类名为text的name_1为 
console.log($('.text').attr('name_1'))//proName
console.log($('.text').prop('name_1')) //undefined  prop不能获取自定义属性
$('#btnSet').click(function () {
  console.log($(this).attr('disabled')) //undefined 表单中的不能用attr
  console.log($(this).prop('disabled'))//flase
})复制

三、jquery对尺寸操作

1、width()和height()方法

• 设置或返回元素的宽度高度
• 相当于 style.width()
  元素本身大小

console.log($('#child').width())//返回元素的宽度
console.log($('#child').height())
$('button').click(function () {
  $('#child').width('400px')//点击以后 将元素的宽度改为400px
  $('#child').height('300px')
})复制

2、innerWidth() 和 innerHeight()

• 相当于clientWidth() / clientHeight()
  元素本身 + padding

console.log($('#child').innerWidth())
console.log($('#child').innerHeight())复制

3、outerWidth() 和 outerHeight()

• 相当于offsetWidth offsetHeight
  元素本身 + padding + border

console.log($('#child').outerWidth())
console.log($('#child').outerHeight())复制

4、scrollTop()和scrollLeft()

• 方法设置或者返回滚动条被卷去的元素的高度
• scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

$(window).scroll(function () {
// console.log($(window).scrollTop())
console.log($(window).scrollLeft())
})复制

$('#set').click(function () {
  $(window).scrollTop(600)//点击按钮  滚动条卷去600px
})复制

四、jQuery添加和删除元素

1、append() 结尾插入（选择的元素内部）

$("#add").click(function () {
  console.log($("#parent").append("<li>我是添加的元素</li>"));
})复制

2、prepend() 开头插入（选择的元素内部）

$("#add").click(function () {
    console.log($("#parent").prepend("<li>我是添加的元素</li>"));
})复制

3、after() 之后插入 （该元素的外面）

$("#add").click(function () {
  console.log($("#parent").after("<li>我是添加的元素</li>"));
})复制

4、before() 之前插入 （该元素的外面）

$("#add").click(function () {
  console.log($("#parent").before("<li>我是添加的元素</li>"));
})复制

5、remove() 删除元素 （包括自己）

• 删除自己和自己的子元素
• 删除以后不占位置

$("#add").click(function () {
  console.log($("#parent").remove());
})复制

6、empty() 删除元素（自己本身不删除）

• 删除自己的子元素
• 自己本身不删除

$("#add").click(function () {
  console.log($("#parent").empty());
})//parent不删除  里面的都删除复制