学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)

Posted 1994july

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)相关的知识,希望对你有一定的参考价值。

jq的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquey.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(‘div‘).hide();
    </script>
</body>

</html>

jq的入口函数

$(function (){
   ...//此处是页面DOM加载完成的入口
});
$(document).ready(function(){
   ...//此处是页面DOM加载完成的入口
});

jQuery的顶级对象$

$是jQuery的昵称,在代码中可以使用jQuery代替$,但一般为了方便,通常直接使用$。

jq与DOM的转换

1.DOM对象转换为jq对象

$(‘div‘)

2.jq转换为DOM对象(两种方法)

$(‘div‘)[index]  //index是索引号
$(‘div‘).get(index)   //index是索引号

基本选择器

$("选择器")  //里面选择器直接写css选择器即可,但是要加引号
名称 用法 描述
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $(‘*’) 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,l") 选取多个元素
交集选择器 $("li.current") 交集元素

层级选择器

名称 用法 描述
子代选择器 $("ul>li"); 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

设置样式

$(‘div‘).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元素中,选择索引号为偶数的元素

筛选方法

技术图片

 来源:35分类目录

以上是关于学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)的主要内容,如果未能解决你的问题,请参考以下文章

JS 的 入口函数 和 JQ 的 入口函数 的对比

jQuery入门知识点介绍

web--JQeury基础实例汇总

jQuery基础

jq用法:入口写法

jq学习笔记