入门jQuery
1.初识理解
1.1 原生JS的固定写法
window.onload=function(ev){ };
1.2 jQuery的固定写法
$(document).ready(function(){ });
1.3 原生JS查找DOM元素，第一个div
window.onload=function (ev) { vardiv1=document.getElementsByTagName('div')[0]; console.log(div1); };
1.4 jQuery查找DOM元素，第一个div
$(document).ready(function(){ var$div1=$("div")[0]; console.log($div1); });
2.jQuery和JS入口函数的区别
2.1 原生JS和jQuery入口函数的加载模式不同，原生JS会等到DOM函数加载完毕，并且图片也加载完毕才会执行，jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行.
window.onload=function(ev){ //通过原生的JS入口函数可以拿到DOM元素varimg=document.getElementsByTagName("img")[0]; console.log(img); //通过原生JS入口函数可以拿到DOM元素的宽高varwidth=window.getComputedStyle(img).width; console.log("onload",width); }; $(document).ready(function(){ //通过jQuery入口函数可以拿到DOM函数var$img=$("img"); console.log($img); //通过jQuery入口函数不可以拿到DOM函数的宽高var$width=$img.width(); console.log("ready",$width); });
2.2 原生的JS如果编写了多个入口函数，后面编写的会覆盖前名编写的，jQuery中编写多个入口函数，后面的不会覆盖前面的。
window.onload=function(ev){ alert('hello'); }; window.onload=function(ev){ alert('world'); }; $(document).ready(function(){ alert('hello'); }); $(document).ready(function(){ alert('world'); });
2.3 jQuery的四种写法
//1.第一种$(document).ready(function(){ alert("hello world") }); //2.第二种jQuery(document).ready(function(){ alert("hello wold") }); //3.第三种 (推荐第三种,最简洁)$(function(){ alert("hello boys") }); //4.第四种jQuery(function(){ alert("hello girls;") });
3.jQuery冲突问题
使用jQuery语法需要引入jQuery库，jQuery中对$定义语法并使用，如果引用的其他js文件也有对$符号的引用产生冲突。解决方法如下：
3.1 释放$的使用权
注意点：释放操作必须在编写其他jQuery代码之前编写,释放之后就不能再使用$,改为使用jQuery。
jQuery.noConflict();
3.2 自定义一个访问符号
varnj=jQuery.noConflict(); nj(function(){ alert("hello world"); });
4.jQuery核心函数
$();jQuery();就代表调用jQuery的核心函数
//1.接受一个函数$(function(){ alert("hello world") //2.接受一个字符串//2.1接受一个字符串选择器//返回一个jQuery对象，对象中保存了找到的DOM元素var$box1=$(".box1"); var$box2=$("#box2"); console.log($box1); console.log($box2); //2.2接受一个代码片段var$p=$("<p>我是段落</p>"); console.log($p); $box1.append($p); //3.接受一个DOM元素//会被包装成一个jQuery对象返回给我们varspan=document.getElementsByTagName("span")[0]; console.log(span); var$span=$(span); console.log($span); }); <body><divclass="box1"></div><divid="box2"></div><span>我是span</span></body>
5.jQuery对象
$(function(){ /* jQuery对象是一个伪数组 伪数组：有0到length-1的属性，并且有length属性 */var$div=$("div"); console.log($div); });
