Jquery知识点总结

一、匿名函数自执行的优势

使用匿名函数自执行，创建一个私有空间，这样内外部的命名空间就不会相互干扰了。可以避免变量全局污染；
把window做为参数传进来：
- 一是便于代码压缩，有时候关键字是没法被压缩的
- 兼容模块化写法。在浏览器环境下，给factory传入的是window
- 可以节省查找全局window的时间，提高性能
noGlobal为undefined，确保undefined可以使用;在低版本undefined会被修改的，函数不传参就是undefined;

(function(global,factory){
	factory(global);
})(typeof window !== "undefined" ? window : this,
    function(global,noGlobal){
	    console.log('这里才是jquery源码',global,noGlobal);
    });
//

二、jQuery获取元素

jQuery中的window.onload；

$(callBack)
$(document).ready(callBack)
$().ready(callBack)

以上的方法可以在页面中同时共存；

jQuery中获取元素方法：

$(selector)

$(function(){
    console.log($('.list li'));	
    console.log($('.list span'));			//如果是一个获取不到的元素，那它不会报错。如果要做判断的话，可以判断它的length属性
				
	//var div3=$('#div2');
    var div2=document.getElementById("div2");		//用原生js获取到的元素不能使用jquery里的方法。如果想用的话，那就把原生js获取到的元素转成jquery的形式
    $(div2).css('background','red');		//把原生js的对象包装成jquery的对象
});

三、jQuery中的事件

语法：$(selector).click(callBack)

没有on

this的问题：
this的指向和原生中的指向是一样的，但是在jQuery中使用this的话，需要转成$(this)再使用；
- 原生对象和jQuery对象相互转换：
  1.$(原生对象)，这样就变成了jQuery对象了；
  2.$(selector).get(index)这样就把jQuery对象转成了原生对象；

四、jQuery中常用的方法

css( ) 关于样式的操作

一个参数：获取属性的值；
两个参数：设置属性的值；

$('#box').css('width')   //获取属性的值；
$('#box').css('width'，“200px”)  //设置属性的值；
//设置属性的值有简单的方法如下：
$('#box').css({width:200,height:200,background:'green'});

表单value的值

$(selector).val 获取表单的值；
$(selector).val（value）设置表单的值；

att( ) 关于标签属性的操作

一个参数：获取属性的值；
两个参数：设置属性的值；

data( ) 给标签添加数据；

语法：$(p).data({这里面放一个对象})
有参数的话是添加数据，数据用对象的方式去表示；
没有参数的话是获取数据；

html( )

取元素中的内容，相当于原生js当中的innerHTML；
如果放参数的话，就是设置innerHTML；

text( )

取元素里面的文字，不包括标签名；和上面的html（）有区别；
如果放参数的话，就是设置text；

五、节点DOM操作

获取节点：
- .first()
- .last()
- .slice(start,end)这个和字符串里面的slice的方法一样的，有两个参数的话，从第一个开始，不包括第二个；要是只有一个参数的话，就是从开始的到最后；
- .find(selector)获取元素里面的所有的节点；选择器里面自由填写；
- .children()获取元素的第一层子节点；这个里面是可以加参数的；

//上面的例子；
$('ul').children('.blue').css('color','blue');
//就是只是给ul下面的带有class=“blue”的节点添加属性；

父节点与最近的节点
- .parent()元素的第一层父节点；
- .parents()元素所有的父节点；往上一直找到html；
- .closest(condition)从自身开始一层一层往外找，找到最近一个的满足条件的元素；找到这一个就不找了；
创建节点与插入节点
- $(<li>green</li>)这样写就是创建节点了；
- 父级.append(要添加的元素)添加到父级的最后；
- 父级.prepend(要添加的元素)添加到父级的最前面；
- 元素.before(要添加的元素)添加到指定的元素前面；
- 元素.after(要添加的元素)添加到指定的元素后面；

var li1=$(<li>red</li>);
$("ul").append(li1);
$("ul").prepend(li1);
var div1=$(<div>black</div>);
$("ul").before(div1);
$("ul").after(div1);

另外一种写法：把要添加的元素放在前面

li1.appendTo($("ul"));      //添加到父级的最前面
li1.prependTo($("ul"));     //添加到父级的最后面     
div1.insertBefore($("ul")); //添加到元素的前面
div1.insertAfter($("ul"));  //添加到元素的后面

移除、克隆、上一个、下一个节点
- 元素.remove()删除节点；
- 元素.clone(Blooen)克隆元素；
  - 不填参数的话，默认为false；
  - false代表只复制元素，不复制自带的事件；
  - true代表不仅复制元素，还复制身上的事件；
- .prev()上一个兄弟节点；
- .next()下一个兄弟节点；
索引：.index()
- 不带参数：获取到的元素当中的第一个元素在兄弟元素中的排行；
- 带参数：代表前面的元素在标签（不是兄弟元素，是所有的和参数一样的标签的元素）里面的排行；

这个概念比较饶人，例子好好演示一下

    <body>
		<p>p</p>
		<div>div</div>
		<div>div</div>
		<!--<div id="div1"></div>-->
		<div>
			<div id="div1"></div>
		</div>
		<span></span>
		<span></span>
		<div class="box">
			<span id="s1">s1</span>
			<span></span>
			<span></span>
		</div>
		<div><span id="s2">s2</span></div>
	</body>
	
	<script>
	$(function(){
        console.log($("#div1").index())     //0
        //因为它在它的兄弟元素中排一个；
        console.log($("div").index())      //1
        //在它的兄弟元素中排第二个，索引为1；
        console.log($("#s1").index("span"));//2
        //获取到#s1之后，index里的参数为span，那么就在所有的sapn标签中找，看#s1的位置；
        console.log($("#s1").index("div"));//-1
        //因为div里面没有id=“#s1”的元素，返回-1；
	})
	</script>

通过索引找对应的元素：
eq(index);参数是索引值；

循环.each( function(i,element){} )
- i代表每个元素对应的下标（索引）；
- element每个元素，注意这是原生的元素；
- 在循环中可以设置一个跳出条件：return或者return false;

六、元素与可视区的尺寸

元素的尺寸
- width()获取元素的宽度(值不带单位)；有参数的话，代表设置宽度，参数不用带单位；
- height()获取元素的高度;有参数的话，代表设置高度，参数不用带单位；
- innerWidth() width+padding
- innerHeight() height+padding
- outerWidth() width+padding+border
- outerHeight() height+padding+border
可视区的尺寸
- 页面的宽高
  - $(document).width()页面的宽
  - $(document).height()页面的高
- 可视区的宽高
  - $(window).width()可视区的宽
  - $(window).height()可视区的高
元素的距离
- 元素相对于文档的距离
  - offSet().left
  - offSet().top
- 元素相对于父级的距离
  - position().left
  - position().top

positon的值是不受margin的影响的；

offSetParent找到最近的有定位的父级；
滚动条的距离
- scrollTop();
- scrollLeft();

如果有参数，就代表设置滚动条的位置；

七、事件以及事件对象

jQuery添加事件的方法：

//第一种：不用on；
$('div').click(function{
    console.log(1);
})
//第二种：
$('div').on("click",function{
    console.log(2);
})
//这种用on的方式，事件可以叠加；
$('div').on("click mousemove",function{
    console.log(2);
})

移除事件的方法：

$(this).off()这种方法会只让以上的this指向相同的事件函数只运行一次，之后就会被移除了；

事件对象

jQuery中的事件对象（ev）和原生的差不多，少许不同

- `clientX`鼠标不带滚动条到左边的距离；
- `pageX`鼠标带滚动条到左边的距离；
- `return false`相当于原生中的`ev.preventDefault`和`ev.stopPropogation`;

jQuery中的事件委托

<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>

<script>
    $("ul").on("click","li",function(){
        console.log(1);
    });
</script>

1.只能用on来添加事件，js代码的意思是把ul身上的事件委托给了li去执行；当点击li的时候才会执行click事件；
2.这里面的this指向的是第二个参数；

自定义事件

也很简单，都已经封装好了；
on是添加；trigger是调用；

//示例代码；
$("ul").on("点击",function(){
        console.log(1);
    });
$("ul").click(function(){
    $(this).trigger("点击")；
})

八、工具方法

$(选择器).css() $(选择器).html()以上这些都是jquery里的方法，原生的不能直接用;
$.xxx(),$.yyy()这些方法是jquery里的方法，原生的也可以直接用;
- $.type()检测参数的类型;
- $.isFunction()
- $.isNumeric()
- $.isArray()
- $.isWindow()
- $.isEmptyObject()检测是不是空对象；
- $.isPlainObject()检测是不是纯对象；

九、jQuery中的运动

show()和hide();
- show(duration,easing,complate);
- hide(时间,运动方式,回调函数);
- toggle(duration,easing,complate);

1.让元素在显示隐藏之间转换，会默认修改宽高和透明度等等；
2.比show和hide有优势，不要去做判断了

fadeOut()和fadeIn();
- fadeOut();隐藏；
- fadeIn();显示；
- fadeToggle();

用法和show和hide差不多；只不过不改变宽高，只改变透明度；

slideUp()和slideDown();
- slideUp(duration,easing,complate)收缩；
- slideDown(duration,easing,complate)展开；
- slideToggle();
animate()
- animate(property,duration,easing,complate)
  - property：要运动的属性；它是一个对象；
- $(?).animate({width:'toggle',height:"toggle"},500,'linear');
- $('#div3').animate({width:'+=100'},500,'linear');

这里面的+=表示每次运动宽度都增加一段；

延迟与停止动画
- 延迟动画delay(time);
- 停止动画
  - stop()只停止当前的运动，后面的继续走；
  - stop(true)所有的运动都会停止；
  - stop(true,true)当前的运动到目标点，后面不走；
  - finishi()所有的运动都立刻到目标点，没有运动；

十、jQuery中的插件

网上多得是，要注意看它们的api文件；
拓展插件的方法：

1.$.extend()扩展工具方法下的插件；
2.$().fn.extend()扩展jQuery对象下的插件$().extend()；

//extent里面传的是一个对象；
$.extend({
    leftTrim:function(str){
                 return str.replace(/^\s+/,'');
             },
    rightTrim:function(str){
                 return str.replace(/\s+$/,'');
			 }
});
//上面👆写的是工具方法；			
    var str=' kaivon ';
    console.log(str);
	console.log($.leftTrim(str));
    console.log($.rightTrim(str));

posted on 2018-04-23 10:18 小笼包爱编程阅读(113) 评论(0) 收藏举报

刷新页面返回顶部

Jquery知识点总结

一、匿名函数自执行的优势

二、jQuery获取元素

jQuery中的window.onload；

jQuery中获取元素方法：

三、jQuery中的事件

四、jQuery中常用的方法

五、节点DOM操作

六、元素与可视区的尺寸

七、事件以及事件对象

八、工具方法

九、jQuery中的运动

十、jQuery中的插件

导航

公告