JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解

时间:2021-11-02 23:08:20

JQuery的基本概念

JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM、处理事件、执行动画等操作。JQuery强调的理念是:'write less, do more'(写的少,做的多)。

1.JQuery的版本

版本
兼容范围
1.x版本
能够兼容IE678浏览器
2.x版本
不兼容IE678浏览器
3.x版本
不兼容IE678浏览器,更加的简洁
名称
大小
说明
jquery.js(开发版)
约229KB
完整无压缩版本,主要用于测试、学习和开发
jquery.min.js(生产版)
约31KB
经过压缩,主要用于产品和项目,基本无可阅读性

2.JQuery的使用

  1.使用JQuery必须先导入jquery-x.x.x.js文件。

<script src="js/jquery-3.1.1.js"></script>

  2.JQuery中的选择器
    $("选择器名称").函数名();
    例子:console.log($("#div1"));
    注意:$是JQuery的缩写,也就是说,选择器可以使用JQuery(":input")

    选择器:查帮助文档,这里就不再赘述了。

  3.JQuery中的文档就绪函数: $(document).ready(function(){});

            //JS中的文档就绪函数
window.onload= function(){ } //JQuery的文档就绪函数
$(document).ready(function(){
console.log($("#div1"));
});
//简写模式
$(function(){})
  4.JQuery文档就绪函数与window.onload的区别
类别 window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后(包括图片,视频)才能执行 网页中所有DOM结构绘制完毕后就执行,并不会等待图片、文件的加载

编写个数 只能写一个,不能同时写多个,如果同时写了多个,下面的会把上面的覆盖 能同时编写多个,两个入口函数互不影响
简化写法

$(function(){});

  5.JS对象和JQuery对象:

    ①使用$取到的节点为JQuery对象,只能调用JQuery方法,不能调用原生JS方法。

      正确的:$("#div1").click(function(){})

      错误的:$("#div1").onclick = function(){}(使用JQuery对象调用原生JS)

      同理,使用getElement系列函数取到的为原生JS对象,也不能调用JQuery函数。

【JQuery对象与JS对象的相互转换】
  (1)JQuery转JS:

方法一(常用):[index]
var $box = $("#box"); // JQuery获取到的对象
var box = $box[0]; // 转成JS对象
box.innerHTML = "哈哈哈"; // 使用JS的方法 方法二:get(index)
var $box = $('#box'); // JQuery获取到的对象
var box = $box.get(0); // 转成JS对象
box.innerHTML = "哈哈哈"; // 使用JS对象的方法

  (2)JS转JQuery:
      JS对象转成JQuery对象的十分简单,只需要用$()把JS对象包裹起来就是一个JQuery对象。

var box = document.getElementById("#box");  // 获取的JS对象
$(box).click(function(){}); // 转成JQuery对象

  6.解决JQuery多库冲突问题:
    页面中如果同时引入多个JS框架,可能导致$冲突。
  解决办法:
    (1)使用jQuery.noConflict():使用JQuery放弃在全局使用$。
    (2)使用jQuery关键字代替$,或者使用一个自执行函数:

!functio($){
  //在自执行函数中,可以使用$替代jQuery
  //除自执行函数外的其他区域,禁止JQuery使用$
}(jQuery);

DOM操作

1.添加节点

名称 用法 描述
 
append()
 $("#div1").append("<img src='../01-HTML基本标签/img/Female.gif' />");   在div的内部最后追加一个图片
 
appendTo()
 $("<img src='../01-HTML基本标签/img/Female.gif' />").appendTo("#div1")  把一个图片追加到div1的内部最后
 
prepend()
 $("#div1").prepend("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />");  在div的内部最前边加入一张图片
 
prependTo()
 
 $("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />").prependTo("#div1");
 把一个图片追加到div1的内部最前边
after()  $("#div1").after("<p>这是一个P标签</p>")  在div1的外部最后,插入节点
insertAfter()  $("<p>这是一个P标签</p>").insertAfter("#div1");  将一个节点插入div1的外部的最后
 
before()
 $("#div1").before("<p>这是一个P标签</p>");  在div1外部的前边插入一个节点
 
insertBefore()
 $("<p>这是一个P标签</p>").insertBefore("#div1");  将一个节点插入到div1的外部的最前面

2.包裹节点

名称 用法 描述
wrap() $("div").wrap('<i></i>') 为每一个选中的节点都套一个父节点
wrapAll() $("div").wrapAll('<i></i>') 将选中的所有节点包裹在同一个父节点中
unwrap() $("#div1 p").unwrap() 删除选中节点的父节点
wrapInner() $("#div1").wrapInner('<div></div>') 将选中的节点中的所有子元素包裹在一个新的父节点中(新的父节点依然是当前元素的子节点,而且是当前元素的唯一子节点)

3.替换节点

名称 用法 描述
replaceWith() $("#div1 p").replaceWith("<span>1</span>")  将选中的节点重新替换成新的节点
replaceAll() $("<span>1</span>").replaceAll("#div1 p");  用新的节点替换所有选中的节点

4.删除节点

名称 用法 描述
empty() $("#div1").empty(); 清空当前节点中的内容,但会保留当前节点标签
remove() $("#div1").remove(); 删除当前节点已经当前节点的子节点
detach() $("#div1").detach() 删除当前节点已经当前节点的子节点,与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

remove()和detach()的区别:
  使用remove()删除的节点,在恢复后,将不再保留节点所绑定的事件。
  使用detach()删除的节点,在恢复后,可以保留节点之前所绑定的事件。

5.复制节点

  clone():拷贝复制节点,它也有深拷贝和浅拷贝。深拷贝和浅拷贝的区别就是,深拷贝会复制绑定的事件,而浅拷贝不会复制绑定的事件。

  写法:clone(true)为深拷贝,默认不传或者传false就是浅拷贝。

JS中的cloneNode()和JQuery中的clone()的区别:

  (1)cloneNode()如果不传入参数或者参数传入false,表示只克隆当前节点,不克隆子节点。传入true表示克隆当前节点以及子节点。

  (2)clone()无论传入的是true还是false,都克隆当前节点以及子节点,传入true表示克隆节点的同时将保留节点的事件,否则表示只克隆节

6.查找节点

使用JQuery选择器,查找到需要的元素后,可以使用attr()方法来获取它的各种属性的值,text()方法来获取它的文本内容。

    console.log($("#div1 p").attr("title"));//查询div1下面的p标签的title属性值。

    console.log($("#div1 p").text());//查询div1下面的p标签的文本内容

7.创建节点

  创建元素节点很简单,直接使用 $(html),html就是需要添加的元素。$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

      var li = $("<li title="城市">深圳</li>");

      $("#div1").append(li);

属性和CSS类的操作

1.attr操作

  (1)attr(),可以用来获取属性也可以用来设置属性。当attr()参数为一个的时候,即属性名称,表示的是获取属性。当attr()里面的参数是两个的时候,即属性名称和对应的值,表示的是设置属性。如果想要设置多个属性,参数就是一个json对象(键值对的形式)。

                //获得属性
$("#div1").attr("id");
//添加属性
$("#div1").attr("class","cls");
//添加多个属性
$("#div1").attr({
"class":"cls1",
"name":"name1",
"style":"color:blue"
});

    除了attr方法类似的还有:html()、text()、height()、width()、val()、css()等方法,不传参则是获取值,传参则是设置值。

  (2)removeAttr():删除节点属性。(删除多个属性用空格隔开)

      $("#div1").remove("cls")

2.prop操作

  (1)获取、设置属性时用prop()方法与attr()方法一样,当prop()参数为一个的时候,即属性名称,表示的是获取属性。当prop()里面的参数是两个的时候,即属性名称和对应的布尔值。

  (2)在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,不能用attr()方法,只能用prop()方法。

  (3)removeProp():删除节点属性

      prop()和attr()的不同:在读取 属性名="属性值"的属性时,attr将返回属性值和undefinded;而prop返回true或false。也就是说attr()要取到的属性必须是在标签上已经写明的属性,否则无法取到。

3.CSS类的操作

  addClass():在原有class的基础上新增class名。

  removeClass():删除指定的class名称,其余未删除的class名依然保留。

  toggleClass():切换指定的class名称。如果类名存在则删除它,如果类名不存在则添加它。

  hasClass():用来判断是否包含一个class的名称。返回值为true或false。

CSS样式操作

1.通过css()设置属性

(1)通过css()的方法设置或者获取样式,无论样式属性是从外部导入的,还是直接写在HTML标签里面的,属于行级样式表。添加多个样式的时候,css(),里面的参数是一个对象。传入一个参数的时候是表示获得当前CSS样式的属性值。

JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解

(2)通过回调函数返回值修改CSS的样式

JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解

2.取到或者设置节点的宽高

 $("#div1").height();  // 获取 p 元素的高度值
$(window).height(); // 获取页面可视区的高度
$("#div1").width(); // 获取 p 元素的高度值
$(window).width(); // 获取页面可视区的高度
$("#div1").innerHeight(); //取到节点的高+padding,不包含border和margen
$("#div1").innerWidth(); //取到节点的宽+padding,不包含border和margen
$("#div1").outerHeight(); //取到节点的高+padding+border(不传参),不包含margen
$("#div1").outerWidth(true); //取到节点的宽+padding+border+margen(传参数:true)

3.位置

 $("#div1").offset():返回一个节点相对于浏览器左上角的偏移量,返回的是一个对象{top:20,left:20}。
注意:此方法测量时会将margen算入偏移量的距离。 $("#div1").position():返回一个节点相对于父容器的偏移量。
注意: (1)使用此方法,要求父元素必须是定位元素。如果父元素不是定位元素,则依然是相对于浏览器左上角进行测量。
   (2)此方法,测量偏移时,将不考虑margen,而会将margen视为当前容器的一部分。
$(window).scrollTop(200):设置或取到滚动节点的滚动条的位置。

JQuery函数

(1)each():用于遍历JQuery中的对象数组,在回调函数中,可以使用return true相当于continue,return false相当于break;

                 //each类似于foreach
$("#ul1 li").each(function(index,item){
//true 类似continue false 类似于break
if(index%2 != 0){
return true; }
console.log(index)
console.log($(item).text())
//在回调函数中,this指向当前调用函数的节点对象
//this是一个JS对象,如果要用JQ对象,需要使用$(this)
$(this).text($(this).text()+"12314");
});

(2)$("#ul1 li").size()/$("#ul1 li").length:返回查询元素的个数

(3)get():将JQuery对象转换为JS对象。传入index表示取出第几个,返回一个JS对象。如果不传入参数那么返回全对象的数组。

(4)$.each(arr/obj,function(index,item){}):对传入的数组或对象进行遍历,可以是JQuery对象数值,也可以是JS中的数组和对象。

(5)$.map(arr,function(index,item){return item}):数组映射,返回一个新数组.

(6)$.inArray():检测一个值是否在数组中,返回下标。参数1:值,参数2:数组,参数3:查找的起始下标。(没找到为-1)

(7).toArray():将选中的JQuery的DOM集合,恢复成数组,数组的每一个是JS对象。

(8).marge():合并俩个数组。

(9)parseJSON:将一个JSON字符串转换成JSON对象。

(10)$.contains(父对象,字对象):父对象和子对象必须是JS对象

JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解