jQuery 入门

Posted 2022-11-16 yad123

jQuery是什么？

jQuery是一个javascript常用的工具函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

writer less , do more -----  用更少的代码，解决更多的需求

jQuery的版本问题

目前jQuery有三个大版本，1.xx.xx、 2.xx.xx 和 3.xx.xx

1版本兼容性最高,可以有效的兼容ie浏览器

2版本删除了兼容最低只能兼容到ie9,使代码更加轻量化

3版本重构了底层代码,彻底放弃了ie9以下的浏览器,但是却新增加
了很多的使用的方法，并且代码的安全性也增加很多

jQuery的使用

我们可以根据需要下载一个指定版本的jquery文件，当然也可以选择使用第三方文件。

js 官方网址: http://jquery.com/

例如:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery

jQuery 中的核心语法

在jQuery当中，jQuery是一个核心方法，用来查找元素从而方便对元素的操作，可以简写为 $


jQuery("#btn").click(function() 
        alert(123);
    );

// 上边的代码也可以改为
$("#btn").click(function()
    alert(123)
)

基础语法

$(selector).action();

• 美元符号定义jQuery
• 选择符(selector) "查询"和"查找"html元素
• jQuery的action()执行对元素的操作

 文档就绪函数

在js当中，存在一个 window.onload = function(),函数当中的代码会在整个文档加载完成之后执行

在jquery中,也有类似的方法

$(document).ready(function()
    // jq 代码
);

// 上述代码也可以简写为:
$(function()
    // jq 代码
)

//这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码,造成错误。

$(function())与window.onload的区别

•  window.onload必须等到页面所有的元素都加载完成之后才能使用,而$(function())只需DOM加载完成就会执行
• window.onload一个页面只能有一个,而$(function())可以有多个,从上到下执行

jQuery 对象

 原生的DOM元素与jq的DOM元素的方法，不互通

 原生代码可以和jq代码同时存在，只是互相之间对象的属性或方法不互通

 

 jq对象与原生对象之间的转换

1.jq对象转原生对象

　　解析数组

$("#box")[0].style.background = "blue";

　　get()方法

$("#box").get(0).style.background = "blue";

2.原生转jq对象

　　　将对象包裹在jq函数中 

var obox1 = document.getElementById("box1");
$(obox1).css("background","yellow")

jQuery 选择器

在jq当中，我们可以通过选择器任意的选取html元素，并且操作html元素。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

三个基础选择器如下:

$("p") 元素选择器
$("#d1") id选择器
$(".class") class选择器

高级选择器

$(".msg h2").css("background","red")                 //后代选择器
$(".msg").find("h2").css("background","red")

$(".msg>h2").css("background","red")
$(".msg").children("h2").css("background","red")     //子元素选择器

$(".msg+span").css("background","red")               //相邻兄弟选择器
$(".msg").next("span").css("background","red")

$(".msg~span").css("background","red")               //普通兄弟选择器
$(".msg").nextAll("span").css("background","red")

$("input[type=text][name]").css("background","red")  //属性选择器

伪类选择器

$(".list li:first").css("background","red")      //选择第一个子元素
$(".list li").first().css("background","red")

$(".list li:last").css("background","red")      //选择最后一个子元素
$(".list li").last().css("background","red")

$(".list li:eq(3)").css("background","red")   //选择子元素中的第3+1个(从0开始)
$(".list li").eq(3).css("background","red")

$(".list li:odd").css("background","red")   //选择奇数


$(".list li:even").css("background","red")  //选择偶数

$(".list li:not(.red)").css("background","red")   //选择没有当前类名的
$(".list li").not(".red").css("background","red")

$(".list li:contains(j)").css("background","red")   //选择内容含有j的标签

$(".list li:empty").css("background","red")  //选择空标签


//注意:$(".list li").empty()方法,是清空标签的内容,该方法不是选择器



$(".list:has(.red)").css("background","red")   //选择类名为red的标签
$(".list").has(".red").css("background","red")

$("h1:hidden").css("display","block")  //选择隐藏的元素
$("h1:visible").css("display","none")   //选择显示的元素

常用选择器还可以访问:

https://www.w3cschool.cn/jquery/jquery-ref-selectors.html