jQuery

jQuery

学习了jQuery感觉是真的很好用，感谢那些参与代码编写的大佬们

1.1 初认识

1.1.1 入口函数

作用相当于onload事件,等dom结构渲染完毕即可执行

但又有所不同

onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

// 第一种
$(function () {
      
    ...  // 内容
}) ; 

// 第二种
$(document).ready(function(){
   
   ...  //  内容
});

1.1.2 顶级对象$

可以用jQuery来代替，相当于原生js中的window

1.1.3 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象是 DOM 对象
2. jQuery 方法获取的元素是 jQuery 对象。
3. jQuery 对象是经过包装的dom对象（伪数组形式存储）

jQuery对象才能使用jQuery方法,不能混用

1.1.4 jQuery对象和Dom对象转换

// DOM对象转换成jQuery对象
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// jQuery 对象转换为 DOM 对象两种方法：
//  jQuery对象[索引值]
var domObject1 = $('div')[0]
// jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

2.1 jQuery选择器

2.1.1 基础选择器

2.1.2 层级选择器

2.1.3 筛选选择器

2.1.4 其他选择器

2.2 基础知识

2.2.1 排他思想

$(this).css(“color”,”red”);//自己变色
$(this).siblings(). css(“color”,””);//兄弟除色

2.2.2 隐式迭代

在jQuery内部会遍历dom对象的过程叫做隐式迭代

$('div').hide(); //页面中所有的div都会被隐藏

2.2.3 链式编程

$(this).css('color', 'red').sibling().css('color', ''); 

3.1 样式操作

3.1.1 操作css

var strColor = $(this).css('color');

$(this).css(''color'', ''red'');

//参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({
    "color":"white","font-size":"20px"});

一般来说通过在style中编写样式，通过添加类的方式添加样式

3.1.2 设置类名方法

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名

3.2 jQuery效果

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队：stop() ;

这样就可以在动画执行的时候停止动画

3.2.1 显示隐藏

• 显示隐藏：show() / hide() / toggle() ;

关于参数

参数都可以省略，无动画直接显示

第一个参数speed : 三种预定速度（show，normal，fast）或者是动画时长的毫秒数

第二个参数 easing：指定切换效果，默认是’swing’ 还可设为’linear’

第三个参数 fn :回调函数，在动画完成时执行的函数

3.2.2 滑入滑出

• 滑入滑出：slideDown() / slideUp() / slideToggle() ;

3.2.3 淡入淡出

• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

tips: fadeTo()必须要写速度和透明度，透明度表示淡入后的最大透明度

<script>
    $(function() {
   
        $('button').eq(0).click(function() {
   
            $('div').stop().fadeIn();
        })
        $('button').eq(1).click(function() {
   
            $('div').stop().fadeOut();
        })
        $('button').eq(2).click(function() {
   
            $('div').stop().fadeToggle();
        })
        $('button').eq(3).click(function() {
   
            $('div').stop().fadeTo(100,.3);
        })
    })
</script>

3.2.4 自定义动画

• 自定义动画：animate() ;

第一个参数传入更改的样式属性,以对象形式传递，注意复合属性用驼峰命名,后面3个参数可以省略

<script>
    $(function() {
   
        $('button').click(function() {
   
            $('div').animate({
   
                left: 500,
                top: 300,
                opacity: .5,
                hight: 300
            })
        })
    })
</script>

注意设置top,left的时候要给div加定位，否则无效

3.2.5 事件切换

jQuery中有hover()事件，功能类似于css中的hover

hover(function,function)

传入2个参数，第一个参数是鼠标移入是触发的函数，第二个是鼠标移出时触发的函数

只写一个参数时，鼠标移入移出都会触发它

4.1 jQuery属性操作

4.1.1 元素固有属性值 prop()

获取元素本身自带的属性,有利于对表单操作

• 表单属性：disabled checked这类属性操作很顺畅

//获取
prop('属性名');

//更改
prop('属性名','属性值');

4.1.2 元素自定义属性值 attr()

//获取
attr('属性名');

//更改
attr('属性名','属性值');

4.1.3 数据缓存 data()

可以在指定的元素上存取数据，但不会修改DOM元素结构。页面刷新缓存清除

data('myName','ljc');//向元素添加数据

data('myName');//向元素读取数据

4.1.4 全选按钮

通过:checked选择器，可以以数组形式返回被选中的元素

$(function() {
   
    $('.all').change(function() {
   
        $('.child').prop('checked',$('.all').prop('checked'));//全选按钮
    })
    $('.child').change(function() {
   
        if($('.child:checked').length == $('.child').length) {
   
            $('.all').prop('checked',true);// 如果小按钮全部被选中，全选勾上
        }else {
   
            $('.all').prop('checked',false);
        }
    })
})

4.2 文本属性

4.2.1 文本内容

• 普通元素内容

这样获取到的会带有标签

可以通过传入参数来更改内容

<div>
    <span>123</span>
</div>

<script>
    console.log($('div').html());// <span>123</span>
    $('div').html('ljc'); //div中只剩ljc
</script>

• 普通元素文本内容

只会获取文本的内容，不会获取标签

• 表单的值 val()

console.log($("input").val());//获取表单的内容
$("input").val("123");//改表单的内容

保留2位小数 toFixed(2)

4.3 元素操作

4.3.1 遍历元素

隐式迭代是对同一类元素做同一件事情，但是要做不同事情的话还是需要使用遍历

$('div').each(function(index, domEle) {
   });

• 是dom对象不是jQuery对象，需要转换成jquery对象才能使用方法

$.each(obj,function(index,domele){
   })

可以用来遍历任何对象，主要用来做数据处理，

var sum = 0;
var arr = ['red','blue','yellow'];
$('div').each(function(index, domEle) {
   
    //index是索引号 domEle是dom元素对象
    $(domEle).css('color', arr[index]);
    //转化为整数，否则输出0123，以字符串来拼接
    sum += parseInt($(domEle).text());
})
console.log(sum);//6

$.each({
   
    name: 'ljc',
    age: 20
},function(i,ele) {
   
    console.log(i); // name age
    console.log(ele); // 'ljc' 20
})

4.3.2 操作元素

• 创建元素

var li = $('<li>新创建的元素</li>');

• **添加元素(**在后面添加)

$('ul').append(li);

• 添加元素(在前面添加)

$('ul').prepend(li);

• 外部添加(在前面添加)

 $('div').before(div);

• 外部添加(在后面添加)

 $('div').after(div);

• 删除元素

$('ul').remove();//整个ul删除

• 删除元素集合中的子节点

$('ul').empty();//相当于清空ul里的内容

• 通过html来清空

$('ul').html();

4.4 尺寸，位置操作

4.4.1 jQuery尺寸操作

• 返回值是数字型的
• 如果参数是数字，则修改样式
• 参数不写单位

4.4.2 jQuery 位置操作

1. offset()设置获取元素偏移

获取的位置是相对于文档的偏移坐标，与父级没有关系

传入的参数是一个对象

//获取偏移量
$('div').offset()
//更改位置
$('div').offset({
   
      top: 200,
      left: 100
})

2. position()获取带有定位的偏移

获取的位置是相对于带有定位的父级元素

这个方法只能获取，不能修改

$('div').position()

3. scrollTop() scrollLeft 设置元素被卷去的头部和左侧

不跟参数是获取，跟参数是设置

5.1 jQuery 事件

5.1.1 on() 绑定事件

on()绑定事件的好处

1. 可以绑定多个事件，多个处理事件函数

$('div').on({
   
    mouseover : function() {
   },
    click : function() {
   }
})
$('div').on('mouseenter mouseleave',function() {
   
    $(this).toggleClass('currrnt');
})//如果执行的程序相同可以采用这种方法

2. 事件委托

$('ul').on('click','li',function() {
   
       alert('hello world');
 })

3. 对于新创建的元素，click无法绑定，但是on可以

$('div').on('click','p',function() {
   
    alert('别点我');
})

$('div').append($('<p>新来的</p>'))

5.1.2 off()解绑事件

• 解除全部事件

$('div').off()

• 解除特定事件

$('div').off('click')

• 解除事件委托

$('div').off('click','li')

• 只触发一次的事件

$('div').one('click',function(){
   })

5.1.3 tigger()自动触发事件

// 会触发元素的默认行为
$("div").click();
// 会触发元素的默认行为
$("div").trigger("click");
//不会触发默认行为，比如自动获取焦点
$("input").triggerHandler("focus");//不会获取焦点

6.1 jQuery 事件对象

和原生js的事件对象基本相同

阻止默认行为 ： event.preventDefault(),return false

阻止冒泡 : event.stopPropagation()

6.1.1 拷贝对象

$.extend([deep], target, obj1)

1. [deep]，深拷贝为true，默认为false 浅拷贝
2. target要拷贝的对象
3. obj被拷贝的对象

$(function() {
   
    var targetObj = {
   
        sex : 'male'
    };
    var obj = {
   
        id: 1,
        name: 'andy'
    };
    $.extend(targetObj,obj);// v把obj 拷贝给 targetObj
    console.log(targetObj);// {sex: "male", id: 1, name: "andy"}
    console.log(obj); // {id: 1, name: "andy"}
})

如果传入多个对象，则在后面的对象会覆盖前面的对象

6.1.2 多库共存

用来解决命名冲突的问题

jQuery解决方法

1. 把$换成jQuery。jQuery('div')
2. 自定义名字。 var xx = $.noConflict();

<script>
	$(function() {
   
  		// 让jquery 释放对$ 控制权 让用自己决定
  		var ljc = jQuery.noConflict();
  		console.log(ljc("span"));
	})
</script>

7.1 jQuery 插件

1. 引入css.
2. 引入JS
3. 引入html。

---

还有很多东西没有学，那就继续加油吧！

转载：https://blog.csdn.net/m0_50855872/article/details/115422472