前端jQuery

最新推荐文章于 2024-07-25 09:24:40 发布

LonM

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量219

点赞数

文章标签： jQuery 前端

本文链接：https://blog.csdn.net/qq_45555892/article/details/102693230

版权

前端jQuery

1.选择器、样式操作、效果

jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

jQuery 的下载**

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

相当于原生 js 中的 DOMContentLoaded

jQuery 对象和 DOM 对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

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

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

总结：实际开发比较常用的是把DOM对象转换为jQuery对象

jQuery 选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 和CSS选择器写法一致

筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取li元素中索引号为2的元素，index从0开始
:odd	$(‘li:odd’)	获取li元素中索引号为奇数的元素
:even	$(‘li:even’)	获取li元素中索引号为偶数的元素

筛选方法

语法	用法	说明
parent()	$(‘li’).parent();	查找父级
children(‘选择器’)	$(“ul”).children(“li”);	查找最近一级的亲儿子相当于$(“ul>li”)
find(‘选择器’)	$(“ul”).find(“li”);	相当于$(“ul li”) 和后代选择器一样
siblings(‘选择器’)	$(".first").siblings(“li”);	查找兄弟节点，不包括自身
nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的兄弟元素
prevAll([expr])	$(".first").prevAll();	查找当前元素之前所有的兄弟元素
hasClass(class)	$(“div”).hasClass("protected"0;	检查当前的元素是否含有某个特定的类，如果有返回true
eq(index)	$(“li”).eq(2);	相当于$(‘li:eq(2)’)，index是从0开始的

jQuery样式操作

排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作


// 以前的js是不允许对于一组对象之间操作的，只能对一个元素对象进行操作
var divs = document.getElementsByTagName('div');
divs.style.backgroundColor = 'red'; // 错误
divs[0].style.backgroundColor = 'red'; // 正确

链式编程

// 链式编程是为了节省代码量，看起来更优雅。
//原代码
$(this).css('color', 'red');
$(this).sibling().css('color', ''); 
//链式编程的代码
$(this).css('color', 'red').sibling().css('color', ''); 

//jq的操作方法： css(),hide(),show()等等，会将调用者返回
//jq的筛选方法，会将筛选完的对象返回。 非筛选方法（操作方法），会将调用者（jq对象）返回

jQuery 得到当前元素索引号

$(this).index();

jQuery弹窗(类似alert)

var isC = confirm('您确定要退出吗') //点击后返回布尔值

jQuery操作 css 方法

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color'', 'red');

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

jQuery设置类样式

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

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

// 3.切换类  没有就添上  有就移除
$("div").toggleClass("current");

原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

jQuery 效果

显示、隐藏、二者切换

显示

语法： show( [ speed ,[easing],[fn] ] ) 参数都可以省略