1.jQuery的属性操作
html() 他可以设置和获取起始标签和结束标签中的内容 跟dom属性 innerHTML一样
text() 他可以设置和获取起始标签和结束标签中的文本 跟dom属性 innerText一样
val() 他可以设置和获取表单项的value属性值 跟dom属性 value一样
不传参数是获取,传递参数是设置
attr() 可以设置和获取属性的值 不推荐操作 checked、readOnly、selected、disabled等等
? attr 方法还可以操作非标准的属性。比如自定义的属性:abc,cbf,dasfac,fdfa,ds
prop() 可以设置和获取属性的值 只操作 checked、readOnly、selected、disabled等等
2.dom的增删改查
2.1内部插入
appendTo() a.appendTo(b) 把a插入到b所有子元素末尾,成为最后一个子元素
prependTo() a.prependTo(b) 把a插入到b所有子元素前面,成为第一个子元素
2.2外部插入
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBeforer(b) 得到ab
2.3替换
replaceWith() a.replaceWith(b) 用b替换掉a
replaceAll() a.replaceAll(b) 用a替换掉所有的b
2.4删除
remove() a.remove() 删除 a 标签
empty() a.empty() 清空 a 标签里的内容
3.css样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除,没有就添加样式
offset() 获取和设置元素的坐标
4.jQuery动画
4.1基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏,不可见就显示
? 以上动画方法都可以添加参数
? 1.第一个参数是动画 执行的时常 以毫秒为单位
? 2.第二个参数是动画的回调函数(动画完成后自动调用的函数)
4.2淡入淡出动画
fadeIn() 淡入(慢慢可见)
fadeOut() 淡出(慢慢消失)
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值
fadeToggle() 淡入/淡出 切换
5.jQuery事件操作
$( function() {} );
和
window.onload = function() {}
的区别?
他们分别在何时触发?
? 1.jQuery的页面在加载完成之后,要等浏览器内核解析完标签创建好dom对象,才会执行
? 2.原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好dom对象,还要等标签显示时需要的内容加载完成后,才会执行
他们触发的顺序?
? 1.jQuery页面加载完成之后先执行
? 2.原生js的页面加载完成之后
6.jQuery中其他的事件处理方法
click() 他可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用方法bind一样,但是绑定的事件只会响应一次
unbind() 跟bind方法相反的操作,解除事件的绑定
live() 也是用来绑定事件。可以绑定选择器匹配的所有元素事件,即便是这个元素后面动态创建出来的同样有效
6.1事件的冒泡
事件的冒泡指:
指父子元素同时监听同一个事件,当触发子元素的事件,同一个事件也被传递到父元素的事件中响应
如何阻止事件得冒泡?
在时间的函数体内,return false; 可以阻止事件的冒泡传递
6.2jQuery事件对象
1.原生js获取事件对象
window.onload = function(){
document.getElementById(“areaDiv”).onclick = function (event){
? console.log(event);
? }
}
2.jQuery代码获取事件对象
$(function (){
? $("#areaDiv").click(function (event) {
? console.log(event);
});
});
3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$("#areaDiv").bind(“mouseover mouseout”,function (event) {
? if (event.type == “mouseover”) {
? console.log(“鼠标移入”);
? } else if (event.type == “mouseout”) {
? console.log(“鼠标移出”);
};
});
|