JS day04笔记

一. jQuery跟JavaScript的区别
1)区别: Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
2)Jquery的作用:简化javascript开发,代码简洁
3) Jquery的使用: 1.下载Jquery的js文件
2.在需要使用jquery的文件中引入js文件

注:script中间不能写代码否则不会执行
$"符号在jQuery中代表对jQuery对象的引用,"jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。注：只有jQuery对象才能调用jQuery提供的方法。二.DOM对象与JQuery对象互相转换1)DOM对象转Jqyery包装集对象将DOM对象放到$()括号中
例: var dtoj = jQuery(mydivDom);
var dtoj2 = $(mydivDom);console.log(dtoj);console.log(dtoj2);2)Jqyery包装集对象转DOM对象Jqyery包装集取下标Jqyery包装集[0]例:varjtod=mydivJquery[0];console.log(jtod);3)通过each()方法遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为 jQuery 对象
例:mydivJquery.each(function(index,element){
console.log(index);
console.log(element);
console.log($(element));console.log(this);console.log($(this));
});
三. 层次选择器 Hierarchy
1.后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
2.子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
3.相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素
4.同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
四. 基础选择器 Basics
选择器 名称 举例
1.id 选择器 $("#testDiv")选择 id 为 testDiv 的元素（id属性值）
2.元素名称选择器 $(“div”)选择所有 div 元素 （元素名称）
3.类选择器 $(".blue")选择所有 class=blue 的元素 （class属性值）
4.选择所有元素 $("*")选择页面所有元素
5.组合选择器 $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
五.表单选择器
1.元素选择器(获取input元素)
var inputs = $(“input”);
console.log(inputs.length);
2.表单选择器(获取整个表单)
var inps = $(":input");
console.log(inps.length);
3.获取所有的复选框
var cks = $(":checkbox");
console.log(cks);
六. 操作元素的属性
1)获取属性
1.attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined。
例:attr(‘checked’)attr(‘name’)
2.prop(属性名称) 获取具有 true 和 false 两个属性的属性值 例:prop(‘checked’)
例: aa
bb
获取元素的属性 （固有属性）
var name1 = $("#ck1").attr(“name”);
console.log(name1);
var name2 = $("#ck2").prop(“name”);
console.log(name2);
// 获取元素的属性 （自定义属性属性）
var a1 = $("#ck1").attr(“aa”);
var a2 = $("#ck1").prop(“aa”);
console.log(a1,a2);
// 获取元素的属性 （设置过属性且属性返回值是boolean类型）
var c1 = $("#ck1").attr(“checked”);
var c2 = $("#ck1").prop(“checked”);
console.log(c1,c2);
// 获取元素的属性 （未设置过属性且属性返回值是boolean类型）
var c11 = $("#ck2").attr(“checked”);
var c22 = $("#ck2").prop(“checked”);
console.log(c11,c22);
2)设置属性
1.attr(“属性名”,“属性值”)
2.prop(“属性名”,“属性值”)
例:
// 设置元素的属性值
$("#ck1").attr(“value”,“1”);
$("#ck2").prop(“value”,“2”);

	// attr()
	$("#ck1").attr("checked","checked");

$("#ck2").prop(“checked”,true);
3)移除属性
removeAttr(“属性名”)
例: // 移除属性
$("#ck1").removeAttr(“name”);
4)attr()与prop()的区别：
共同点：都可以获取元素的属性
不同点：1.attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值（固有属性：元素本身就有的属性）
2.操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
如何选择：1.如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）
2.如果是非boolean类型，则使用attr()方法
七. 操作元素的样式
1)方法 说明
1.attr(“class”) 获取 class 属性的值，即样式名称
2.attr(“class”,”样式名”) 修改 class 属性的值，修改样式
3.addClass(“样式名”) 添加样式名称
4.css() 添加具体的样式
5.removeClass(class) 移除样式名称
2)增加元素的具体样式，格式：
1.css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({“background-color”:“red”,“color”:"#fff"})2）css(“样式名”,”样式值”)
例：css(‘color’,‘white’)
2.css(“样式名”,”样式值”)
例：css(‘color’,‘white’)

3)三种样式区别
  1.attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖

2.addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
3.css():设置具体的样式（设置行内样式，写在style属性中的样式）
八. 操作元素的内容
1)方法 说明
html() 获取元素的 html 内容
html(“html 内容”) 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text(“text 内容”) 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
2)html()和text()
1.html()可以识别数据中的html标签并 显示出来；
2.text()不识别html标签，会当做纯文本显示
3.取值时，html()能够获取到元素中的html代码，text()只会获取纯文本

3)表单元素:取值赋值使用 val()
  文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
4)非表单元素:取值赋值使用  html()和text()
  div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

九. 创建元素与添加元素
1)创建元素
$(‘元素内容’)

2)添加元素
方法 								说明

1.prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
例:$(content).prependTo(selector)把content元素或内容加入selector元素开头2.append(content)在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML元素标记。例:$(content).appendTo(sector) 把 content 元素或内容插入 selector 元素内，默认是在尾部
3.before() 在元素前插入指定的元素或内容:$(selector).before(content)4.after()在元素后插入指定的元素或内容:$(selector).after(content)
十.删除元素与遍历元素

1. 删除元素
   1.remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
   2.empty() 清空所选元素的内容

2)遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
十一. ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function())等价于$(function(){})
区别: ready()加载事件和onload加载事件
1.ready()加载事件在dom结构（html标签）加载完毕后，就执行
2.onload加载事件在dom结构（html标签）及引入的外部资源（js文件、css文件等）加载完毕之后才执行
十二. bind()绑定元素事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可
以包括如下:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error [, eventData]：传递的参数，格式：{名:值,名 2:值 2}
handler(eventObject)：该事件触发执行的函数

例: 得到按钮对象并绑定点击事件
	$("#btn1").bind("click",function(){

alert(“这是一个点击事件”);
例: 绑定多个事件
得到要绑定事件的元素
$("#uname").blur(function(){
console.log(“失去焦点了…”);
}).focus(function(){
console.log(“聚焦…”);
});