jQuery初识

最新推荐文章于 2024-09-04 14:32:46 发布

一只程序耀

最新推荐文章于 2024-09-04 14:32:46 发布

阅读量36

点赞数

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_51017451/article/details/132569550

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

● 什么是jQuery？
○ 1、Jquery是一个javaScript函数库
○ 2、Jquery是一个轻量级的javaScript库
○ 3、jQuery库，包含HTML元素选取，HTML元素操作、css操作、HTML事件函数，JS特效HTML DOM 遍历和修改
● jQuery 入口函数与 JavaScript 入口函数的区别
○ 1、执行时机不同，jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
○ 2、执行次数不同，jQuery 的入口函数可以执行n次，且不会被覆盖，JavaScript 的 window.onload 事件只能执行一次，后面的会覆盖前面的
● jQuery语法
○ 1、美元符号定义jQuery
○ 2、选择符（selector）“查询"和"查找” HTML 元素
○ 3、jQuery 的 action() 执行对元素的操作。
○ $()常用的几种情况
○ $(function(){}) 参数是function说明是入口函数
○ $(‘’)参数是字符串，是一个选择器
○ $() 传 D OM 对象，返回的是 J Q u ery 对象 ● j Q u ery 选择器 ○ (1) 、什么是 j Q u ery 选择器 ■1 、 j Q u ery 选择器允许您对 H TM L 元素组或单个元素进行操作。 ■2 、 j Q u ery 选择器是 j Q u ery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意： j Q u ery 选择器返回的是 j Q u ery 对象。 ■3 、 j Q u ery 选择器基于元素的 i d 、类、类型、属性、属性值等 " 查找 " （或选择） H TM L 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 ■4 、 j Q u ery 中所有选择器都以美元符号开头：$ ()。
○ DOM对象转jq对象，$()传DOM对象，返回的是JQuery对象
○ JQuery对象转DOM对象，选择JQuery对象数组中的第几项就是DOM对象。
○ jQuery选择器的用法和css选择器用法一样。
○ 过滤选择器
■ :eq（index）
● $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
● $(“li:lt(3)”) 获取到的li元素中，选择索引号为小于3的元素，索引号index从0开始。
■ :odd
● $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素，索引号index从0开始。
■ :even
● $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素，索引号index从0开始。
○ 筛选选择器（方法）
用法说明
在这里插入图片描述
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
● jQuery事件

$("p").click(function(){ 
// 动作触发后执行的代码!! 
});

● jQuery css() 方法传一个值返回，传两个设置属性
○ 返回属性

css("propertyname");
$("p").css("background-color");

设置属性

css("propertyname","value");
$("p").css("background-color","yellow");

设置多个属性值

css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery css类
● addClass()
● 向被选元素添加一个或多个类

.important { font-weight:bold; font-size:xx-large; } 
.blue { color:blue; }
$("button").click(function(){ 
$("h1,p").addClass("blue");
 	$("div").addClass("important"); 
});

● removeClass()
● 从被选元素删除一个或多个类

$("button").click(function(){ 
  $("h1,h2,p").removeClass("blue"); 
});

● toggleClass()
● 对被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue"); 
});

● eq()
● 方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

$(selector).eq(index)

● index()
● index() 方法返回指定元素相对于其他同级元素的 index 位置。

$("li").click(function(){
alert($(this).index());
});

● not()
● Not() 方法返回指定元素之外的元素。

$("input").not(".in1")

● jQuery动画
● jQuery隐藏显示
● 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
● 可以使用 toggle() 方法来切换 hide() 和 show() 方法。

//使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
    $('.hideBtn').click(function () {
        $('li').hide();
    })
    $('.showBtn').click(function () {
        $('li').show();
    })
    //可以使用 toggle() 方法来切换 hide() 和 show() 方法。
    $('.cutBtn').click(function () {
        $('li').toggle();
    })

● jQuery淡入淡出
● fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
● fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    //jQuery淡入淡出
    //fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
    $('.fadeInBtn').click(function () {
        $('li').fadeIn();
    })
    $('.fadeOutBtn').click(function () {
        $('li').fadeOut();
    })
    //fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    $('.cutBtn').click(function () {
        // $('li').toggle();
        $('li').fadeToggle();
    })

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$("button").click(function(){ 
  $("#div1").fadeTo("slow",0.15);
});

● jQuery滑动
● slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。

$("#flip").click(function(){ 
  $("#div1").slideDown();
   $("#div1").slideUp();
});

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$("#flip").click(function(){
  $("#panel").slideToggle(); 
});

● jQuery自定义动画
● animate() 方法用于创建自定义动画。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
  $("div").animate({
  	left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  },speed,callback函数; 
});

● stop方法
● jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$("#stop").click(function(){
  $("#panel").stop(); 
});

● 回调函数
● 在当前动画 100% 完成之后执行。

$("button").click(function(){
  $("p").hide("slow",function(){
 	 alert("段落现在被隐藏了"); 
  });
});

● jQuery 事件机制
● 动态绑定 on(),bind(),delegate()
● 注册事件
○ bind() 、on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

$("p").bind("click",function(){
    alert("这个段落被点击了。");
});
$("p").bind("dbClick",function(){
    alert("这个段落被双击了。");
});

//动态绑定，在事件后面加上事件源
//注意两个对象要有父类和后代的关系
$("ul").on("click",'li',function(){
  alert("li被点击了。");
});

● 委托事件
● delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

//动态绑定元素，要绑定的元素要写在事件前面
$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

● each()方法
● each() 方法为每个匹配元素规定要运行的函数。

$("button").click(function(){
  $("li").each(function(){
  	alert($(this).text())
  });  
});

● jQuery 对HTML的设置与捕获
● jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
● (1)、html()
● html() - 设置或返回所选元素的内容（包括 HTML 标记）。传值就是设置不传值就是返回内容

$("#btn2").click(function(){
	alert("HTML: " + $("#test").html()); 
});
$("#btn2").click(function(){
	$("#test2").html("<b>Hello world!</b>"); 
});

● (2)、text()
● text() - 设置或返回所选元素的文本内容传值就是设置不传值就是返回内容

$("#btn1").click(function(){
	alert("Text: " + $("#test").text()); 
});
$("#btn1").click(function(){
	$("#test1").text("Hello world!"); 
});

● (3) 、val()
● val() - 设置或返回表单字段的值应用场景密码框

$("#btn1").click(function(){
alert("值为: " + $("#test").val()); 
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB"); 
});

● (4) 、text()、html() 以及 val() 的回调函数
● 上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
		$("#test1").text(function(i,origText){
		return"旧文本: " + origText + "新文本: Hello world! (index: " + i + ")";
	}); 
});

● 5) 、attr()、prop()
● attr() 、prop()方法用于获取和返回属性值。 attr()可以设置自定义属性

$("button").click(function(){
  alert($("#runoob").attr("href")); 
});
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery"); 
});

● 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；.attr不仅可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。
● jQuery 对HTML的页面尺寸操作
○ (1) width() 和 height() 方法
○ width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
○ height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

 $("button").click(function(){
"div 的宽度是: " + $("#div1").width() + "</br>";
   "div 的高度是: " + $("#div1").height(20); 
});

● (2) 、innerWidth() 和 innerHeight() 方法
○ innerWidth() 方法返回元素的宽度（包括内边距）。
○ innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){
  "div 宽度，包含内边距: " + $("#div1").innerWidth();
  "div 高度，包含内边距: " + $("#div1").innerHeight(); 
});

● (3) 、outerWidth() 和 outerHeight() 方法
○ outerWidth() 方法返回元素的宽度（包括内边距和边框）。
○ outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth()
       txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
   });

● (4) 、scrollTop() 和 scrollLeft() 方法
○ scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
○ scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

$("button").click(function(){alert($("div").scrollTop()); });

● jQuery添加元素和删除元素
○ (1) 、append()方法
○ append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）

$("ol").append("<li>追加列表项</li>");

● (2) 、prepend() 方法
○ prepend() 方法在被选元素的开头插入内容。

$("ol").prepend("<li>追加列表项</li>");

● (3) 、after() 和 before() 方法
○ jQuery after() 方法在被选元素之后插入内容。
○ jQuery before() 方法在被选元素之前插入内容。

$("img").before("<b>之前</b>");
$("img").after("<i>之后</i>");

● 4) 、删除元素/内容
○ remove() - 删除被选元素（及其子元素）
○ empty() - 从被选元素中删除子元素
○ empty()仅仅删除元素的文本,占有位置，不显示在页面，但是DOM节点并没有删除
○ remove()把整个dom节点删除掉，，不占有位置

一只程序耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery初识

● $(“li:lt(3)”) 获取到的li元素中，选择索引号为小于3的元素，索引号index从0开始。● 方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。● $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。● $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素，索引号index从0开始。● attr() 、prop()方法用于获取和返回属性值。attr()可以设置自定义属性。
复制链接

扫一扫

专栏目录