1.释放
,改为使用jQuery
jQuery原理.noConflict();
var nj = jQuery.noConflict(); nj(function () { alert("hello lnj"); });
2、静态方法和实例方法
// 1.定义一个类
function AClass() {
}
// 给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 静态方法通过类名调用
AClass.staticMethod();
//给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();
each方法:
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
注意点:
jQuery的each方法是可以遍历伪数组的
*/
// $.each(arr, function (index, value) {
// console.log(index, value);
// });
$.each(obj, function (index, value) {
console.log(index, value);
});
map方法
第一个参数: 要遍历的数组
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素
第二个参数: 遍历到的索引
注意点:
和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
*/
// $.map(arr, function (value, index) {
// console.log(index, value);
// });
var res = $.map(obj, function (value, index) {
console.log(index, value);
return value + index;
});
var res2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;
});
console.log(res);
console.log(res2);
``
jQuery中的each静态方法和map静态方法的区别:
1. each静态方法默认的返回值就是, 遍历谁就返回谁
2. map静态方法默认的返回值是一个空数组
3. each静态方法不支持在回调函数中对遍历的数组进行处理
4. map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
holdReady方法
$.holdReady(true); 作用: 暂停ready执行
3.内容选择器
:empty 作用:找到既没有文本内容也没有子元素的指定元素
:parent 作用: 找到有文本内容或有子元素的指定元素
:contains(text) 作用: 找到包含指定文本内容的指定元素
:has(selector) 作用: 找到包含指定子元素的指定元素
4. getAttribute() attr()
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);
<body>
<span name = "it666"></span>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
var span=document.querySelector('span');
//获取的div是[object HTMLDivElement]
console.log(span.getAttribute("name"));
})
</script>
</body>
5.attr(name|pro|key,val|fn)
<body>
<span name = "it666"></span>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
$("span").attr("name");
})
</script>
</body>
主要区别
调用 getAttribute() 的主体必须是元素(Element) 不可用$()访问
调用 attr() 的主体必须是对象(Object) 不可用Element访问
6.prop方法
特点和attr方法一致
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点
**官方推荐**:在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
7.jquery操作类相关的方法
1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2。removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加
8.jquery操作文本相关方法
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr]) 操作有value属性的元素
9.jquery位置和尺寸操作方法
1.offset() 作用: 获取元素距离窗口的偏移位
2.position() 作用: 获取元素距离定位元素的偏移位
注意:原生js中的offsetLeft相当于position() offsetLeft必须用Element主体调用 与jquery的offset()不一样
10.srollTop()方法
作用: 获取滚动的偏移位
注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
// 设置网页滚动偏移位
// 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
$("html,body").scrollTop();
11、事件绑定 jQuery中有两种绑定事件方式
1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
2.on(eventName, fn);
编码效率略低/ 所有js事件都可以添加
注意:js中有HTML DOM addEventListener() 方法绑定事件的方式
12、事件移除 off();
off方法如果不传递参数, 会移除所有的事件
off方法如果传递一个参数, 会移除所有指定类型的事件
$("button").off("click");
off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
13、事件冒泡和默认行为
阻止事件冒泡:
if(event && event.stopPropagation){ event.stopPropagation() }else { window.event.cancelable=true; };
阻止默认行为: event.preventDefault();
14.事件自动触发
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
15、jquery自定义事件
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
$(".son").myClick(function (event) {
alert("son");
});
` $(".son").on("myClick", function () {
alert("son");
});
$(".son").triggerHandler("myClick");
自定义命名空间
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
**16、jquery自定义动画 animate({}) **
delay方法的作用就是用于告诉系统延迟时长
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
17、事件委托delegate() 方法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//事件委托
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
</body>
</html>