Jquery——基础

最新推荐文章于 2022-04-05 16:09:15 发布

X可乐

最新推荐文章于 2022-04-05 16:09:15 发布

阅读量239

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/CS_DGD/article/details/104071090

版权

jQuery选择器

在使用jQuery是必须要先引入jq文件

<script src="jquery-3.4.1.min.js"></script>

js的变量与jq的变量的区别：

var a = 10;
var $a = 10;  // $ 声明该变量是jq变量  同时$也是JQuery的简写

dom的变量和 jq的变量之间转换：

	//1. 转换为jq变量
    var oDiv = document.getElementsByClassName("box")[0];
    var $b = $(oDiv);

    //2. 转换为DOM变量
    var $c = $b[0];

jq中顶级对象是 $ 或者jQuery关键字
注意： jQuery中的 $ 和 jQuery关键字本身同为一个对象

入口函数

jq中的入口函数：

$(document).ready(function(){
	这里去存放我们需要暂缓加载的脚步
});
//ready的简写：
$(function () {。。。。。});

onload和 ready的区别：
文档的加载步骤：

解析HTML结构
加载外部的样式表和脚本
解析并执行脚本
构建HTML–DOM模型 (ready方法执行)
加载图片等外部资源
页面加载完毕 (load方法执行)

jq操作css

		  通过jq获取HTML元素
          var oDiv = $(".box");

          设置css样式
          css(参数1,参数2);
            //参数1： 属性名
            //参数2： 属性值
            // 只有参数1时 ：  会返回值指定属性名的值
            // 有两个参数时：   会修改修改指定属性名的值
            // 一个参数是获取，两个参数是修改
           console.log($(".box").css("width"));
           $(".box").css("background","yellow");

链式编程：

$(".box").css("color","red").css("fontSize","30px");
    //链式写法的简单方式 -- 对象
    // 冒号赋值， 逗号间隔
    // 最后一个属性结尾，不需要任何符号
$(".box").css({
   width:'100px',
   height:'100px',
   color: 'green'
});

基础选择器：

获取具有id属性的div

目标[属性名]  当目标具备这个属性时，会被选中
$("div[id]");

目标[属性名=‘属性值’]

当目标具有  指定属性的属性值时 被选中
$("div[id='div2']").css("color","red");

目标[属性名!=‘属性值’]

选取目标中 不具有指定属性值 的所有元素
$("div[id!='div2']").css("color","yellow");

目标[属性名^=‘属性值’]

目标指定的属性名， 是以指定的属性值开头的
$("div[id^='d']").css("background","blue");

目标[属性名$=‘属性值’]

目标指定的属性名  是以指定的属性值结尾的
$("div[id$='2']").css("fontSize","30px");

目标[属性名*=‘属性值’]

目标指定的属性名  只要包含指定的属性值
$("div[id*='iv']").html("我们都被改了");

$("#box")

class

$(".box")

标签名

$("div")

通用选择器

$("*");

层级选择器

$("div>span");

后代

$("div span");

连续的子代

$("div>span>span");

群组选择器

$("div,p");

交叉选择器：两个条件必须同时满足

$("#btn.box");

紧邻选择器：
条件1: 紧挨着制定目标 (这里的指定目标： .box)
条件2：需要在目标的下方书写

$(".box+p");

同辈选择器（同级选择器,同胞选择器)
可以获取到目标下方所有的元素(无论是否紧邻)

$(".box~p");

过滤选择器：

:first 匹配到第一个符合条件的元素

$('li:first').css("background","yellow");

:last 匹配到最后一个符合条件的元素

$('li:last');

:not 除了()中指定的条件，获取:前指定的所有元素，

$("li:not(.list)");

:even 索引为偶数的

$("li:even");

:odd 索引为奇数

$("li:odd:not(.list)");

:eq(指定索引值)

$("li:eq(0)");

:gt(大于索引值)

$("li:gt(1)");

:lt(小于索引值)

$("li:lt(5)");

后代选择器和 find()方法：

$("p span").html("我被html方法改了");
$("p").find("span").css("background","red");

子元素选择器和 children 方法：

$("p>span").css("color","blue");
$("p").children().css("fontSize","30px");

紧邻选择器和 next()方法、nextAll() 方法：

$(".d+button").html("点我");
$(".d").next().css("color","blue");
$(".d").nextAll("button").html("哈哈哈");

prev 方法、prevAll 方法：

$(".d").prev().html("我是新来的div");
$(".d").prevAll().html("我是新来的div");

siblings 方法：

$(".d").siblings("button");

parent([expr])方法：

用一个包含着所有匹配元素的唯一父元素的元素集合。
$('#item1').parent().parent；

parents方法：

//得到含有子元素或者文本的元素
1.$('li:parent'); 
2.parents([expr])；
//得到一个包含着所有匹配元素的祖先元素的元素集合。
//可以通过一个可选的表达式进行筛选。
$('#items').parents('.parent1');

closest([expr])方法：

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。
如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。
如果什么都没找到则返回一个空的jQuery对象。

jq操作DOM

创建节点：

var $li = $("<li>榴莲</li>");

添加节点：

方法：

appendTo：将内容添加到目标中的最后一位

内容.appendTo(目标);
$li.appendTo($("ul"));
$("<li>芒果</li>").appendTo("ul");

prepend：将内容添加到目标的第一位

目标.prepend("内容")
$("ul").prepend("<li>西瓜</li>");
$("ul").prepend("<li>椰子</li>");

after：在指定的元素之后插入元素

目标.after(内容);
$(".box").after("<span class='s'>上面卖的是假货</span>");

insertAfter：将内容添加到目标之后
备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置

内容.insertAfter(目标) :  
$("ul").insertAfter($(".box"));

before：在指定的元素之前插入元素

$(".box").before("<span>我是新来的span</span>");

insertBefore：将内容添加到目标之前
备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置

$(".s").insertBefore($(".box"));

删除节点：
作用： 删除该节点

指定目标.remove()
$(".s").remove();

清空目标子节点：
作用： 清空目标的子节点，但不对目标自身造成影响

目标.empty()
$("ul").empty();

复制：
作用： 会返回指定目标的复制体，需要接受或者直接使用

目标.clone()  
var $b = $(".box").clone();

jq动画效果

hide：
作用： 让目标隐藏（修改的display属性）

目标.hide()
小括号中，可是设置动画执行的时间
$(".box").hide('slow');

show：
作用： 让目标显示

目标.show()
小括号中，可以设置动画执行的时间
$(".box").show(5000);

toggle：
作用： 会先进行目标的属性，如果是显示，就设置为隐藏，
如果是隐藏，就设置为显示

目标.toggle()
$(".box").toggle(2000);

淡入：

$(".box").fadeIn(2000);

淡出：

$(".box").fadeOut(2000);

淡入、淡出：

$(".box").fadeToggle(2000);

渐变到指定的透明度：

参数1 ： 执行的时间
参数2 :  指定的透明度
$(".box").fadeTo(2000,0.3);

滑入：

 $(".box").slideDown(2000);

滑出：

 $(".box").slideUp(2000);

滑入、滑出：

 $(".box").slideToggle(2000);

animate自定义动画：

			$(".text:first").animate({
                'opacity':1,
                fontSize:"40px"
            },3000,function () {
                $(this).animate({
                   fontSize:"16px"
                },1000)

                $(".text:eq(1)").animate({
                    'opacity':1,
                    fontSize:"40px"
                },3000,function () {
                    $(this).animate({
                        fontSize:'16px'
                    },1000)
                })
            })

jq事件绑定

jq 历史中绑定事件的三种方式：

on/off
bind/unbind
live/delegete

备注：
在JQuery 1.7之后推出了 .on() 和 .0ff()方法废弃了live() 和 delegete()方法
on/off 整合了 bind/unbind 方法
所以我们使用较多的绑定方法为 on/off

方法： .on
参数：

参数 1  事件类型  （必填）
		可以同时绑定多个事件，但限于事件功能相同时
		事件功能不相同时，可以采用链式编程，在该方法的后面续写
参数 2  具体执行功能的  子元素！ (可选)
参数 3  传递到函数内部的数据(有些类似实参)   （可选）
参数 4  具体功能   (必填)

语法示例：

$(".box").on("click mouseout",".min_box",{sum:20},function(e){
      console.log("天气不错");
      //通过参数3 传递进来的参数  我们通过  event.data 来获取
      console.log(e.data.sum);
});

通过on绑定事件和直接通过事件名绑定的区别：
通过事件名绑定是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；
而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。

简单概述区别： 通过事件名添加的话新元素不能获得同样的事件而通过on绑定的话可以

读取和使用鼠标状态：==

   $('button').mousedown(function(e){
       alert(e.which) 
       // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
       return false;
       //阻止链接跳转
       return true;
       //返回正常的处理结果.
       return false;
       //返回错误的处理结果;终止处理;阻止提交表单;
       //阻止执行默认的行为.
       return;
       //把控制权返回给页面.
   })

使用对象的方式绑定多个事件：

     $("button").on({
	     mousedown:function () {
	     	alert("按下");
	     },
	     mouseup:function () {
	     	alert("抬起")
	     }
     })

阻止冒泡和默认行为：

 $("button").on('click',function (e) {
	 //阻止默认事件
	 e.preventDefault();
	
	 //阻止冒泡事件
	 e.stopPropagation();
 })

事件的命名空间：

为什么存在： 有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。

  $('input').on('click.abc', function () {

      alert('abc');

  });

.off() 解除事件绑定：

参数1 ：必需 符合要解除目标的 事件类型 事件命名
参数2 ：可选 指定哪些后代元素可以触发绑定的事件
参数3 ：可选。规定当事件发生时运行的函数。
$('input').off('click.abc'); 
//移除 命名为abc的click 事件

备注：
也可以直接使用(’.abc’) 这样的话可以移除相同命名空间的不同事件。
对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。
如果该事件已经删除，则无法模拟使用

$('input').trigger('click.abc');

事件绑定叠加问题：

  var iCount = 0;
  function sayHello() {
      alert("Hello!");
  }
     每Click1次，多响应事件一次（叠加了）
  $('.btn3').on('click', function () {
     iCount = iCount + 1;
     $(".box").html("Say Hello" + iCount + "次");
     $(".box").on("click", sayHello); // 绑定事件（事件叠加了）
  });

     通过off()来解决 永远只响应1次事件 避免事件叠加冲突
  $('.btn3').on("click", function () {
      iCount = iCount + 1;
      $('.box').html("Say Hello" + iCount + "次");
      $(".box").off('click').on('click', sayHello); 
      //先移除事件（避免事件叠加），再绑定事件
  })

prop()与attr()的区别：
prop()的设计目标用于设置或获取指定DOM元素
(指的是JS对象，Element类型)上的属性(property);
attr()的设计目标是用于设置或获取指定DOM元素所对
应的文档节点上的属性(attribute)。

prop只能对html标签本身的属性可以进行获取值或者赋值
attr可以对html标签以外的属性（自定义DOM属性）进行获取值或者赋值

attr可以给元素添加一个自定义的属性值
prop不可以

each方法的使用：

$.each(arr1,function(i,val){ 
//两个参数，第一个参数表示遍历的数组的下标，
//第二个参数表示下标对应的值
	console.log(i+'```````'+val);
});

判断样式类：

if(需要被判断的目标 .is/hasclass(“类名”)){}

is和hasclass的区别：
is()和hasClass()方法都可以用以检查匹配的所有元素里是否含有指定类名

虽说hasClass(className)函数等价于is(“.className”)
但is()方法比hasClass()更好用更强大，参数中不但可以放入字符串，还可以放入函数。

is点一次之后可以继续点击执行另一个条件，hasclass不可以

释放$所有权：

//jQuery.noConflict();
var xx = jQuery.noConflict();

备注：
释放操作必须在编写其它jQuery代码之前编写
释放之后就不能再使用$,改为使用jQuery

停止使用动画：
.stop() 停止动画
.stop(true) 停止动画并清除动画队列所有动画都会停止
.stop(true,true) 停止动画但快速完成动作

jq事件委托

什么是事件委托：
事件委托是利用事件冒泡来实现，只指定一个事件处理程序来管理某一类型的所有事件。

为什么要用事件委托：

在js中添加到页面的事件处理程序的个数直接关系到页面的整体加载速度
因为每个事件处理程序都是一个对象，对象会占用内存。对象越多需要加载的内存就越多
有很多个数据的表格以及很长的列表逐个添加事件，对于开发人员而言，就是噩梦。
事件委托能极大的提高页面的加载速度，减少开发人员的工作量

语法示例：

		$("ul").on("click",".list",function (ev) {
            var target = $(ev.target);
            target.css("background-color","red");
        })

事件委托的使用场景/作用：

操作子元素时，不用一一遍历，可以根据是事件触发的对象来进行相应的操作
可以为DOM当中的很多元素去绑定 “相同的” 事件
将事件委托给父级后，动态创建(删除)的子元素不同重新绑定(解绑)事件，实现了事件和元素的同步更新

适用性：

focus(), blur() 这两个方法本身没有事件冒泡，所以无法使用事件委托
mouseover, mouseout这两个事件的触发率较高，经常需要计算，所以偶尔会出现卡顿。偏差
比较适用的有： click mousedown mouseup keydown keyup keypress

使用jq的好处/为什么使用：

因为jq是轻量级框架，大小不到30kb
他有强大的选择器，出色的DOM封装
有可靠的事件处理机制
完善的ajax
出色的浏览器兼容
支持链式操作，隐式迭代
行为层（功能）和结构层（页面元素）的分离，还支持丰富的插件

X可乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery——基础

jQuery选择器在使用jQuery是必须要先引入jq文件<script src="jquery-3.4.1.min.js"></script>js的变量与jq的变量的区别：var a = 10;var $a = 10; // $ 声明该变量是jq变量同时$也是JQuery的简写dom的变量和 jq的变量之间转换： //1. 转换为jq变量 ...
复制链接

扫一扫