jQuery基础

Posted 2021-01-06 xuanjidd

jq是什么?

1.jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。

2.jq的优点:简单，粗暴 没有兼容性问题

3.版本:国内主要使用1.0+版本

jq的使用

引入jq的方法:

1.下载到本地js

2.引入网络的js文件

使用jq的方法:

入口函数:1.

$(function(){})

2.

$(document).ready(function(){
?
})
?

jq的选择器

基本选择器 :标签 类 id选择器 交集 并集

直接双引号里加入 操作css样式的方法

$("div");//标签
$(".class");//类
$("#id")//ID
$("div.class");//交集
$(".class,.class1")//并集

层级选择器： 子代 后代

类同css 子代后代选择器

$("#id div");//后代
$("#id>div");//子代

过滤选择器：

添加到双引号 里面的选择器后面

$(".class:odd");//选择偶数
$(".class:even");//选择奇数
$(".class:first");//第一个
$(".class:last");//最后一个
$(".class:cheched");//选中的元素

筛选选择器:

添加到选择器后面

$("#id").children(); //找儿子
$("#id").find();  //找后代
$("#id").parent();  //找爹
$("#id").silblings();  //找兄弟，不包括自己
$("#id").next();  //下一个兄弟
$("#id").prev();  //上一次兄弟
$("#id").eq();   //指定下标
$("#id").index();   //返回的当前元素在所有兄弟里面的索引

jq对象与js对象

区别:

1.js对象不能调用jq的方法

2.jq对象包含js对象(理解为jq封装js对象)

互相转换:

js>jq:

$(js对象);

jq>js:

jq对象[0];//
jq对象.get(0)

jq操作CSS:

设置单个样式:

$("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
?

设置多个样式:

$("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });
?

获取样式:

$("#id").css(name);

操作Class

直接添加类名

1. 添加 $("div").addClass("class")

2. 去除 $("div").removeClass("class")

3. 判断 $("div").toggleClass("class")

属性操作

用法和css一样 1.设置单个属性

attr(name, value)
$("img").attr("alt", "图破了");
$("img").attr("title", "错错错错");

2.设置多个属性

$("img").attr({
  alt:"图破了",
  title:"错错错",
  aa:"bb"
})

3.获取属性

$("img").attr(name);

动画 animate()

animate(设置属性,速度,效果,回调函数)

属性是必须的元素

效果:

linear--线性

swing--秋千

速度:

毫秒 字符串(fast,normal,slow)

 $("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    })
?

基本的动画效果:

1. show();显示 hide();隐藏

2. slideDown(); 滑出 slideUp();滑入 slideToggle();滑入滑出

3. fadeIn();淡入 fadeOut();淡出 fadeToggle();淡入淡出

###停止动画:

stop(); 停止当前执行的动画,有两个参数为布尔值

节点操作:

1.添加节点

append();//添加内容后面

prepend();//添加内容前面

before();//添加到标签前面

after();//添加到标签后面

括号里加入html代码,

2.清除节点

html();//有内存泄漏问题

empty();//清空节点

remove()//移除节点

3.复制节点 clone()//可以传入参数

(true:复制事件,false:不复制事件)都是深复制

原文地址 ：https:xuanjidd.xyz