JavaWeb基础篇(三)--jQuery

jQuery笔记还是直接以代码的形式呈现较为直观，源代码及笔记链接：

https://github.com/litBlue/jQuery-Study

一、原生js和jQuery的区别

1.原生js和jQuery入口函数的加载模式不同

-原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行。

-jQuery会等到DOM元素加载完毕，但不会等到图片加载完毕才执行。

2.入口函数会不会覆盖

-原生的js如果编写了多个入口函数，后面的会覆盖前面的。

-jQuery 都会执行，不会覆盖。

二、jQuery入口函数的写法

1.第一种

$(document).ready(function () {
      alert("HelloWorld");
 });

2.第二种

jQuery(document).ready(function () {
      alert("HelloWorld");
 });

3.第三种 **推荐

$(function () {
    alert("HelloWorld");
 });

4.第四种

jQuery(function () {
     alert("HelloWorld");
 });

三、解决冲突问题

1.使用jQuery之前，释放$的使用权

-jQuery.noConflict();

注意：

释放操作必须在编写其他jQuery代码之前编写

释放之后就不能使用$符号了，，改为 jQuery

2.自定义访问符号

-var nb = jQuery. noConflict();

var nb = jQuery.noConflict();
 nb(function () {
    alert("HelloWorld");
 });

四、jQuery核心函数

$() ：代表调用jQuery的核心函数

  //1.接收一个函数
         $(function () {
            alert("入口函数");
 //            2.接收一个字符串
 //            2.1.接收一个字符串选择器，返回一个jQuery对象，对象中保存了找到的DOM元素
             var $box1 = $(".box1");
             var $box2 = $("#box2");
 //            2.2.接收一个代码片段，返回一个jQuery对象，对象中保存了创建的DOM元素
             var $p = $("我是一个代码片段");
             $box1.append($p);
 //            3.接收一个DOM元素，会被包装成一个jQuery对象返给我们
             var span = document.getElementsByTagName("span")[0];
             var $span = $(span);
         });

五、jQuery对象

$(function () {
     /**
      * jQuery 对象是一个伪数组
      * 伪数组：有0-length-1 的属性，并且有length属性
      * @type {*}
      */
 
    var $div = $("div");
    console.log($div);
 });

六、静态方法

直接添加个类的就是静态方法

//1.定义一个类
 function AClass() {
 
 }
 //2.给这个类添加一个静态方法
 AClass.staticMethod = function () {
     alert("这是一个静态方法");
 }
 
 //静态方法通过类名调用
 AClass.staticMethod();
 
 //3.给这个类添加一个实例方法
 AClass.prototype.instanceMethod = function () {
     alert("这是一个实例方法");
 }
 //实例方法通过类的实例调用
 //创建实例
 var a = new AClass();
 //通过实例调用实例方法
 a.instanceMethod();

七、jQuery静态方法

1.$.each 遍历

$.each(obj,function (value,index) {
     console.log(index,value);
 })

2.$.map 遍历

$.map(obj,function (value,index) {
     console.log(index,value);
 })

注意：

jQuery中的each和 map 的区别

-each 静态方法默认的返回值是遍历的谁返回谁

-map 静态方法默认的返回值是一个空数组。

-each 静态方法不支持在回调函数中对遍历的数组进行处理。

-map 静态方法可以在回调函数中通过 return 对遍历的数组进行处理，然后生成一个新的数组返回

3.$.trim() 去除字符串两边的空格

var str = "    i L ove  You   ";
 var res = $.trim(str);
 console.log("-"+str+"-");
 console.log("-"+res+"-");

4.$.isWindow(); 判断传入对象是否是window对象

var w = window;
 var fn = function () {
 }
 
 console.log($.isWindow(w)); //true
 console.log($.isWindow(fn)); //false

5.$.isArray(); 判断传入对象是否是真数组

6.$.isFunction(); 判断是不是一个函数 //该方法验证了jQuery本质就是一个函数，查看源文档可知是一个匿名函数

7.$..holdReady();暂停rady执行，true暂停，false恢复

八、jQuery内容选择器

1.empty 作用：找到既没有文本内容也没有子元素的指定元素

var $div = $("div:empty");

2.parent 作用：找到有文本内容或者有子元素的指定元素

var $div = $("div:parent");

3.contains(text) 作用：找到包含指定文本内容的指定元素

var $div = $("div:contains('我是div')");

4.has(selector) 作用：找到办函指定子元素的指定元素。

var $div = $("div:has('span)");

九、操作属性和属性节点

1.属性就是对象身上保存的变量

2.操作属性：

- 对象.属性名称 = 值；

- 对象.属性名称；

- 对象["属性名称"] = 值；

- 对象["属性"];

function Person() {
 
 }
 var p = new Person();
 //p.name = "zs";
 p["name"] = "zs";

3.属性节点，在HTML标签中添加的属性就是属性节点。

4.操作属性节点

DOM元素.setAttribute("属性名称",“值”);

DOM元素.getAttribute("属性名称");

var span = document.getElementsByTagName("span")[0];
 span.setAttribute("name","nmb");
 console.log(span.getAttribute("name"));

5.属性和属性节点的区别

任何对象都有属性，但是只有DOM对象有属性节点

十、jQuery attr,prop方法

1.attr(name|pro|key,val|fn)

作用：获取或者设置属性节点的值

可以传递一个或者两个参数，一个时代表获取属性节点的值，两个时代表设置属性节点的值

 console.log($("span").attr("class"));
 console.log($("span").attr("class","newSpan"));

注意：

获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值

设置：找到多少个就会设置多少个

如果设置的属性不存在，系统会新增。

2.removeAttr(name)

注意：会删除所有找到元素的属性节点

console.log($("span").removeAttr("class name"));

3.prop()

与attr一样

$("span").eq(0).prop("demo","lit1");
 $("span").eq(1).prop("demo","lit2");
 
 console.log($("span").prop("demo"));

注意：prop 方法不仅能操作属性，还能操作属性节点

console.log($("span").prop("class"));
 $("span").prop("class","box");

4.removeProp()

与removeAttr()一样

$("span").removeProp("demo");

注意：官方推荐在操作属性节点时，具有true 和 false 两个属性的属性节点，如 checked，selected 或 disabled 使用 prop(),其他的使用 attr();

十一、类操作

1.addClass(class|fn) 添加类

如果要添加多个，多个类名之间用空格隔开即可。

$("div").addClass("class1 class2");

2.removeClass([class|fn]) 删除类

如果要添加多个，多个类名之间用空格隔开即可。

$("div").removeClass("class2");

3.toggleClass(class|fn[,sw]) 切换，有就删除，没有就添加

如果要添加多个，多个类名之间用空格隔开即可。

$("div").toggleClass("class1");

十二、文本值相关的操作

1.html([val|fn])

与原生js的innerHTML 一样

$("div").html("

我是一个段落我是span

");

2.text([val|fn])

$("div").text("

我是一个段落我是span

");

3.val([val|fn|arr])

$("input").val("请输入");

十三、CSS相关的操作

1.设置

-逐个设置

$("div").css("width","100px");
 $("div").css("background","yellow");

-链式设置

$("div").css("width","100px").css("background","yellow");

-批量设置

$("div").css({
     width: "100px",
     background:"yellow"
 });

2.获取样式

console.log($("div").css("width"));

十四、尺寸和位置的操作

1.offset([coordinates]) 获取元素距离窗口的偏移位

-设置

$(".son").offset({
     left:0
 });

-获取

console.log($(".son").offset().left);

2.position() 获取元素距离定位元素的偏移位

-获取

console.log($(".son").position().left);

-不可以设置

十五、scrollTop使用

1.获取

//获取偏移位
 console.log($(".scroll").scrollTop());
 console.log($("html").scrollTop());

注意：为了保证浏览器的兼容性，获取网页偏移位的时候采用下面的方法

console.log($("body").scrollTop()+$("html").scrollTop());

2.设置

$(".scroll").scrollTop(300);

考虑网页兼容性

$("html,body").scrollTop(300);