jQuery学习(1)——jQuery选择器

jQuery选择器


先看看w3cschool的对jQuery的概述:

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。

最常用的有以下三个:

1. 元素选择器

$("div")

2. ID选择器

$("#ID")

3. class选择器

$(".test")

这里有更多的选择器实例 w3cschool jquery选择器

下面这个demo,包含了以上链接的实例练习:


<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jquery 选择器学习title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script>
    $(document).ready(function(){
        $('*').css('font-size','30px');     //选取所有元素 设置字体

        $('#a').css('background','green');  //id选择器 设置背景颜色 绿色
        // alert($('#a'));
        // alert(document.getElementById('a'));
        $('.b').css('background','blue');   //.class选择器 设置背景颜色 蓝色

        $('p').css('background','yellow');  //元素选择器 设置背景颜色 黄色

        $('#a span').css('border','2px solid yellow');      //后代选择器 设置黄色边框

        $('div:first').css('border','3px solid red');     //伪类选择器 选择第一个div  设置红色边框

        $('p.test').css('background','gray');   //选择class为test的p元素
        
        //ul--------------------------

        $('ul li:first').css('border','2px solid red');  //选择第一个ul的第一个li 设置红色边框
        
        $('ul li:last-child').css('color','green');     //选择所有ul下的最后一个li 设置绿色字体
        
        $('[href]').html('我是带href属性元素');     //选择带href属性的元素 修改元素内容为‘我是带href属性元素’

        $("a[target='_blank']").html("我是带target='_blank'属性的a标签");    //选择带target='_blank'属性的a标签

        $(':button').css('background','green');     //选择type=button的input,或者

你可能感兴趣的:(jQuery学习)