jQuery简介及选择器

2023-12-16 23:28:21

一、jQuery简介

1、JS的onload事件只能实现一次，而且实现的是最后一次

2、jQ可以实现多次，按代码顺序实现

3、基本语法通过$ 符定义jQuery， $( 选择器 ) . 方法 ( )

<!DOCTYPE html>

<head>

<title>jQuery</title>

</head>

<body>

// JS onl oad事件只能实现一次，而且是最后一次

window.onload = function(){

alert("hello js");

}

window.onload = function(){

alert("hello js--1");

}

window.onload = function(){

alert("hello js--2");

}

// jQuery 可以实现多次加载

$(document).ready(function(){

alert("hello jQuery");

})

$(document).ready(function(){

alert("hello jQuery--1");

})

$(document).ready(function(){

alert("hello jQuery--2");

})

// 基本语法

// 通过$符定义jQuery

// $(选择器).方法()

</script>

</body>

</html>

4、在jQuery中声明变量需在变量前加$

5、Jq转为JS对象 var jsDiv = $jqObj[0];

6、js转为jq var $jqDiv = $(jsdiv);

<!DOCTYPE html>

<head>

<title>jQuery</title>

</head>

<body>

$(document).ready(function(){

// $区别 jQ和JS的变量

var $jqObj = $("#box");

$jqObj.html("hello");

// jq转换为JS对象,函数不能转

var jsDiv = $jqObj[0];

// JS转为jQ对象

var $jqdiv = $ (jsDiv)

})

</script>

</body>

</html>

7、Jquery的三种书写方法

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

②$().ready( function () {} )

③$( function () {} )

<!DOCTYPE html>

<head>

<title>jQuery</title>

</head>

<body>

// 页面加载函数

// 第一种方法

$(document).ready(function (){

})

// 第二种方法

$().ready(function(){

})

// 第三种方法

$(function(){

})

</script>

</body>

</html>

二、jQuery选择器

Ⅰ、基本选择器

①ID选择器

语法 $(“#id”)

相当于JS中的document.getElementById(“id”)

②元素选择器

语法 $(“标签名称”)

相当于JS中的document.getElementsByTagName(“标签名称”)

③类名选择器

语法 $(“.class”)

相当于JS中的document.getElementsByClassName(“class”)

④复合选择器

语法$(“selector1, selectpr2, ... ”)

⑤通配符选择器

语法 $(“ * ”)

<!DOCTYPE html>

<head>

<title>jQuery 基本选择器 </title>

</head>

<body>

<p></p>

$(function () {

// id选择器

var $jqDiv = $("#box");

$jqDiv.html("ID选择器");

// 元素选择器

var $jqDiv1 = $("div");

$jqDiv1.html("元素选择器");

// 类选择器

var $jqDiv2 = $(".cls");

$jqDiv2.html("类选择器");

// 复合选择器

var $jqfh = $("span, p");

$jqfh.html("复合选择器");

// 通配符选择器

var $jqt = $("*");

$jqt.html("通配符选择器");

})

</script>

</body>

</html>

Ⅱ、层次选择器

①父子（先辈后辈）选择器

语法 $(“ancestor descendant”)

②父子选择器

语法 $(“parent>child”)

③兄弟选择器

语法 $(“prev+next”)

④同级选择器

语法 $(“prev ~ siblings”)

<!DOCTYPE html>

<head>

<title>jQuery 层次选择器</title>

</head>

<body>

<p> HELLO </p>

<div>

<p> WORLD</p>

</div>

</ul>

$(function(){

// 先辈后辈选择器(父子选择器)

var $jqObj = $("#box p");

console.log($jqObj.html());

// 父子选择器

var $jqObj1 = $("ul>li");

console.log($jqObj1.html());

var $jqObj2 = $("#l>li");

console.log($jqObj2.html());

// 兄弟选择器，只匹配一个

var $jqObj3 = $("#d+div");

console.log($jqObj3.html());

// 同级选择器

var $jqObj4 = $("#d~div");

$jqObj4.html("---");

})

</script>

</body>

</html>

Ⅲ、过滤选择器

①简单过滤器

:first 只匹配第一个元素

:last 只匹配最后一个元素

:even 所有的奇数

:odd 所有的偶数

:eq(index) 指定元素（从0开始）

:gt(index) 比...大

:lt(index) 比...小

:header 匹配标签

:not() 去除

<!DOCTYPE html>

<head>

<title>jQuery简单过滤选择器</title>

</head>

<body>

$(function(){

// :first,只匹配第一个元素

$(".p1:first").html("first");

// :last,只匹配最后一个

$(".p1:last").html("last");

// :even,所有的奇数

$(".p1:even").html("even");

// :odd，所有的偶数

$(".p1:odd").html("odd");

// :eq(index),指定元素，从0开始

$(".p1:eq(2)").html("第三个");

// :gt(index),比...大

$(".p1:gt(2)").html("比第三个大");

// :lt(index)，比...小

$(".p1:lt(2)").html("比第三个小");

// :header,匹配标签

$(":header").html("标题过滤");

// :not(),去除

$("p:not(.p1)").html("hello");

})

</script>

</body>

</html>

②内容过滤器

contains(xx) 匹配包含的元素

empty 匹配空的，有空格则不是空

has(xx) 匹配含有的元素

parent 匹配父标签

<!DOCTYPE html>

<head>

<title>jQuery内容过滤选择器</title>

</head>

<body>

<table>

<tr>

<td>

</td>

<td>

<p> today is a good day</p>

</td>

</tr>

</table>

$(function(){

// contains(xx) 匹配包含的元素

$(".p1:contains('b')").html("包含b");

// empty 匹配空的，有空格则不是空的

$(".p1:empty").html("空的");

// has(xx) 匹配含有的元素

console.log($("td:has(span)"));

// parent 匹配父标签的元素

$(".p1:parent").html("haha");

})

</script>

</body>

</html>

③可见性过滤器

:visible 匹配可见元素

:hidden 匹配不可见元素

<!DOCTYPE html>

<head>

<title>jQuery可见性过滤选择器</title>

</head>

<body>

$(function(){

// :visible 匹配可见元素

console.log($("input:visible").val());

// :hidden 匹配不可见元素

console.log($("input:hidden").val());

// 匹配最后一个不可见元素

console.log($("input:hidden:last").val());

})

</script>

</body>

</html>

④表单过滤器

<!DOCTYPE html>

<head>

<title>jQuery表单过滤选择器</title>

</head>

<body>

<form>

<input type="checkbox" checked="checked" value="复选框1"> 选框1

<input type="checkbox" checked="checked" value="复选框2"> 选框2

<input type="checkbox" value="复选框3"> 选框3

<input type="button" value="不可用按钮" disabled> 按钮

</select>

</form>

$(function(){

// :checked 匹配所有选中的标签

console.log($("input:checked:eq(0)").val());

// :disabled

console.log($("input:disabled").val());

})

$(function(){

console.log($("select option:selected").val());

})

</script>

</body>

</html>

⑤子元素过滤器

<!DOCTYPE html>

<head>

<title>jQuery子元素过滤选择器</title>

</head>

<body>

<ul>

</ul>

$(function(){

// first-child

$("ul li:first-child").html("first-child");

// last-child

$("ul li:last-child").html("last-child");

// nth-child 从1开始

$("ul li:nth-child(2)").html("2th-child");

})

</script>

</body>

</html>

Ⅳ、属性选择器

[attr] 匹配指定属性的元素

[attr=val] 选择指定值的元素

<!DOCTYPE html>

<head>

<title>jQuery属性过滤选择器</title>

<style>

div{

width: 100px;

height: 50px;

margin: 10px;

}

</style>

</head>

<body>

$(function(){

// [attr] 匹配指定属性的元素

$("div[name]").css("background-color", "blue");

// [attr=var] 选择指定值的元素

$("div[name='div2']").css("background-color", "red");

// $("div[name!='div1']").css("background-color", "green");

// 全部匹配

$("div[name*='div1']").css("background-color", "green");

// 匹配以div开头的

$("div[name^='div1']").css("background-color", "green");

// 完全匹配div1

$("div[name$='div1']").css("background-color", "green");

})

</script>

</body>

</html>

Ⅴ、表单选择器

<!DOCTYPE html>

<head>

<title>jQuery表单过滤选择器</title>

</head>

<body>

<form>

</form>

$(function(){

var $jqObj1 = $(":checked")

var $jqObj1 = $(":password")

})

</script>

</body>

</html>

码农公寓

相关文章