jquery的属性获取与操作
- 操作html的内容属性
- 获取html的内容
- $('#div1').html(); 取出html的内容
- 修改html的内容
- 第一种方法html
- $('#div1').html('<span>添加文字</span>'); 设置html的内容（会将内容的标签部分渲染成标签元素）
- 第二种方法text
- $(".con").text("<a href=''>hehehe</a>"); 设置html的内容（不会渲染内容的标签部分，内容是纯文字）
- 操作html元素的属性（一般不操作类名和style属性）
- 获取元素的属性
- 第一种方法prop
- $('#img1').prop('src'); 取出元素的属性内容
- 特点：
- prop方法不能获取元素的自定义属性，获取自定义属性内容是undefined；
- 当获取<input checkbox>多选框的checked属性的时候， 当元素被选中返回true，没被选中返回false； （备注：checkbox含有checkbox属性的时候表示被选中）；
- 第二种方法attr：
- $(".a1").attr("mydata");
- 特点：
- 可以获取自带属性和自定义属性；
- 只能直接获取属性的内容，当没有该属性的时候为undefined；
- 修改元素属性的方法
- 第一种方法prop：
- $('#img1').prop({src: "test.jpg", alt: "Test Image" }); 设置属性的内容，同时对多个属性设置用字典来存储；
- 第二种方法attr：
- $('#img1').attr({src: "test.jpg", alt: "Test Image" });设置属性的内容，同时对多个属性设置用字典来存储；
- 一些特殊属性的获取及设置的方法
- input标签的value属性
- 获取属性的方法
- $("#talkwords").val()； 获取value属性，同等于$("#talkwords").prop("value");
- 设置属性的方法
- $("#talkwords").val("value值")； 设置value属性，同等于$("#talkwords").prop("value"，“value值”);
- 滚动标签的scrollHeight和scrollTop/scrollLeft属性（溢出的元素，带滚动条的元素）
- 滚动元素的滚动条位置相关的元素
- scrollHeight：滚动标签内容的整体高度；
- scrollTop：滚动内容最上端超出屏幕窗口的高度；
- 普通元素可以控制scrollTop属性的值来控制滚动条的位置
- 如果想控制整个网页的显示位置 ，需要设置<body>/<html>（浏览器兼容问题，需要设置的标签不一样）的属性；
- scrollLeft：同scrollTop，方向不同而已；
- 同scrolltop属性的设置
- 属性的获取方法
- $("#id").prop("scrollHeight"); 获取滚动内容的实际高度；
- $("#id").prop("scrollTop"); 获取最顶部到可视最顶部的距离(一)
- $("#id").scrollTop(); 获取最顶部到可视最顶部的距离(二) 通过scrollTop方法
- jquery提供的方法，返回的都是整数或者是浮点数，不是像素；
- 设置scrollTop属性的方法 .scrollTop()
- $("#id").scrollTop(position);
- position ： 参数为滚动元素最上端超出浏览器窗口的高度+窗口高度；
- 用scrollTop方法设置scrollTop属性的position参数不是scrollTop的目标值，而是表示已显示内容的高度；
- $("#id").prop({scrollTop：flowtop});
- flowtop ： 为元素最上端超出浏览器窗口的高度
- $("#id").css({scrollTop：flowtop}); 设置滚动元素可视范围
- flowtop ： 为元素最上端超出浏览器窗口的高度
- 元素相对于文档的偏移距离的获取
- $（"#id"）.offset().top/left/bottom/right 获取元素相对于window（浏览器窗口）的坐标
- offset()返回的是一个坐标对象，里面包含了相对window的相对位置坐标；
- 返回的坐标是元素不包含margin值得位置坐标，坐标为浮点数或者整数，不是像素；
- 获取元素宽高等属性的方法
- $(".con").width(); 获取内容的宽度
- $(".con").height(); 获取内容的高度
- $(".con").innerWidth(); 获取宽度（包含padding）
- $(".con").innerHeight() ; 获取高度（包含padding）
- $(".con").outerWidth(); 获取宽度（包含padding和border）
- $(".con").outerHeight(); 获取高度（包含padding和border）
- $(".con").outerWidth(true); 获取宽度（包含padding和border和margin）
- $(".con").outerHeight(true); 获取高度（包含padding和border和margin）
jquery循环
- jquery循环方法的作用
- 对jquery选择的对象集合跟别进行操作，需要用到jquery的循环操作，批量对元素的属性进行设置；
- jquery对象的each方法：
- 第一种表示方法
- $("id").each(function(i，book){});
- 第二种表示方法
- $.each(要循环的集合，function(i，book){});
- 该方法循环的集合可以是jquery对象，也可以的js原生的集合类型，可以实现集合的遍历等；
- 使用示例：
- function函数的参数：
- i ： 表示当前循环到第i个元素（从0开始计数）
- book： 表示遍历的集合的第i个元素
- 备注：
- 结束本次each循环：在循环体内返回true： return true
- 结束each循环：在循环体内返回false： rerun false
jquery事件（二）
- 事件函数表单
- 焦点类事件
- blur() 元素失去焦点，通常用于input元素
- focus() 元素获得焦点，通常用于input元素
- change() 内容改变，失去焦点后触发，通常用于input元素
- 鼠标类事件
- click() 鼠标单击
- dbclick() 鼠标双击
- mousedown 鼠标点下
- mouseup 鼠标抬起
- mouseover() 鼠标进入（从父元素进入子元素也触发父元素）
- mouseout() 鼠标离开（从子元素离开至父元素也触发父元素）
- mouseenter() 鼠标进入（ 从父元素进入子元素不触发父元素）
- mouseleave() 鼠标离开（从子元素离开至父元素不触发父元素）
- hover() 同时为mouseenter和mouseleave事件指定处理函数
- 可以实现enter、leave的方法一起写
- $(".con").hover(
function () {console.log("conmouseenter");},
function () {console.log("conmouseleave");}); - 文档加载事件
- ready() DOM加载完成
- 表单提交事件
- submit() 用户递交表单
- 提交事件是由<input submit>标签的点击事件触发的form标签的提交submit事件；
- form标签有默认的提交事件，事件会进行默认提交，可以通过在提交事件的执行函数中设置 return Ture/False来开启和关闭提交行为；
- 同理a标签也有默认的点击事件，事件中有默认跳转的行为，可以通过设置 return Ture/False 来开启和关闭默认跳转行为；
- 键盘类事件
- keyup() 按键抬起事件
- keydwon 按键按下事件
- keypress 按键按下又抬起
- 在键盘事件的执行函数的event参数中，有两个常用的属性，event.key '代表按键的名称'；event.keyCode '代表按键对应的ascii码'；
- 滚动条类事件
- scroll() 拖动滚动条事件监控，当拖动滚动条的时候，会触发；
- 当想监听整个浏览器页面的滚动条的时候，不是对body/htmll来设置监听事件，而是对$(window)事件来设置监听事件（因为body标签和滚动条组成了window窗口， 窗口的滚动条不属于body标签）；
- 输入事件
- input() 监听输入框的输入事件
- 绑定事件的格式
- $("id").事件函数（function(event){}）; function为监听到事件的执行函数
- 事件的执行函数的参数
- 事件函数都会给执行函数传入一个event对象参数（里面存储了各种事件的属性），可以在执行函数中直接调用，通常用来再执行函数中判断事件的启动条件，通过执行条件的不同来执行不同的函数内容；
- 绑定多个事件bind(), one()
- 绑定多个事件可以多次触发
- 格式：
- $("#id").bind("click mouseenter", function () {.....)) ; 同时绑定多个事件
- $("#id").unbind("mouseenter"); 接触绑定
- 绑定多个事件只能触发一次
- 格式：
- $("#id").one("click mouseenter", function () {.....)) ; 同时绑定多个事件
- 直接启动事件的方法
- $("#id").事件函数(); 直接模拟一次事件的触发
事件冒泡
- 事件冒泡
- 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序且没有阻止事件的传递行为或者事件返回true（默认为返回true），那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
- 事件冒泡的作用
- 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
- 事件处理程序
- 阻止事件冒泡
- event.stopPropagation() 在处理程序中阻止事件的传递，通过处理event对象
- 也经常用于在某个元素的事件上设置，用来阻断之后的传递，防止触发父元素的事件；
- 阻止元素默认事件
- event.preventDefault(); 在处理程序中阻止事件的默认行为，通过处理event对象
- 合并阻止事件冒泡和默认行为
- return false 在处理程序中阻止传递事件和取消默认事件
- 在<a> <input> 标签中有默认的跳转页面，和form表单提交的事件，用return false可以阻止默认事件；
- mouseenter和mouseleve mouseover和mouseout的冒泡事件
- mouse的事件方法，对事件进行了特殊处理，冒泡的规则和其他的事件不一样，使用mouse相关时间的时候需要注意
事件委托
- 事件委托
- 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
- 原理：
- 利用事件的冒泡，将父元素的所有子集元素的时间传递给父元素统一处理；
- 事件委托的写法
- $("#list").delegate('li', 'click', function() { $(this).css({background:'red'});});
- 注意：
- delegate第一个参数为元素可以写任何形式的元素选择器，但是包括的所有元素不能是父元素，或者不在父元素层级以下的元素
- 将元素的事件取消传递便可以取消代理；
- 事件委托的优点
- 相比于click（）方法设置的事件，事件的委托可以将父元素的子集元素都进行监听，当动态的向父元素中增加元素的时候，也可以被监听起来，而传统的方法，只能对设置事件之前的所有想要监听的元素进行监听，动态添加后不能直接对新增加的元素进行监听；
jquery元素节点操作
- 元素节点操作
- 元素节点操作是指改变html的标签结构，一般他有两种情况：1.改变现有标签的位置；2.将新创建的标签插入到现有的标签中；
- 元素节点相关操作
- 创建一个新的标签
- var \$div = \$('<div>'); 创建一个空的div，创建空元素的时候可以省略结尾符号；
- var \$div2 = \$('<div>这是一个div元素</div>'); 创建一个元素标签
- 在元素子集最前面插入一个标签
- \$(".con").prepend(\$div); 在\$(".con")标签子集的最前面添加一个元素
- \$div.prependTo(\$(".con")) 在\$(".con")标签子集的最前面添加一个元素
- 在元素子集的最后面插入一个标签
- \$(".con").append(\$div); 在\$(".con")标签子集的最前面添加一个元素
- \$div.appendTo(\$(".con)) 在\$(".con")标签子集的最前面添加一个元素
- 在元素前面插入一个元素
- \$(".con").before(\$div); 在\$(".con")标签前面添加一个元素
- \$div.insertBefore(\$(".con)) 在\$(".con")标签前面添加一个元素
- 在元素后面插入一个元素
- \$(".con").after(\$div); 在\$(".con")标签后面添加一个元素
- \$div.insertAfter(\$(".con)) 在$(".con")标签后面添加一个元素
- 删除一个元素
- \$(".con").remove() 删除元素节点，及其子元素节点
- 备注：
- 如果一个元素已经存在在页面之中，那么对其进行插入相当于改变他的位置；
正则表达式
- 正则表达式的写法
- 方法一
- var re=new RegExp('规则', '可选参数');
- 注意：在js中，没有将字符串的非ascii码对应的内容进行默认加上/转意，所有字符串中的/都需要转义才能正常使用；
- 可选参数有：i ignore：代表忽略大小写；g global：全文搜索，默认搜索到第一个结果接停止（相当于python的findall搜索）
- 返回的是一个匹配规则对象
- 方法二
- var re=/规则/参数;
- 可选参数有：i /g 中间不用加任何符号；
- 返回的是一个匹配规则对象
- 规则中的字符
- 普通字符匹配：
- /a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
- 转义字符匹配：
- \d 匹配一个数字，即0-9
- \D 匹配一个非数字，即除了0-9
- \w 匹配一个单词字符（字母、数字、下划线）
- \W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
- \s 匹配一个空白符
- \S 匹配一个非空白符
- \b 匹配单词边界
- \B 匹配非单词边界
- . 匹配一个任意字符
- 正则的应用方法
- 匹配规则.test(被匹配内容 ) 确认是否含有符合匹配规则的内容
- 返回值为匹配结果：true 或 false
- 示例：
- 一段内容.replace(匹配规则,替换的内容) 将被匹配的内容进行替换
- 常用的正则规则
