jQuery-jQuery引入和jQuery选择器

jQuery引入和jQuery选择器

jQuery引入

先下载jQuery文件,再通过script导入

<!DOCTYPE html>
<html>
<head>
    <meta charset=‘utf-8‘/>
    <title>jQuery</title>
</head>
<body>
    <div class="body">
        <ul>
            <li id="login">登录</li>
            <li id="register">注册</li>
        </ul>
    </div>
    <!--引入jQuery-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
        // 利用jQuery提供的功能获取标签文本
        var value = $(‘#login‘).text();
        console.log(value);
    </script>
</body>
</html>

jQuery对象和DOM对象

DOM对象和jQuery对象都为标签提供了各种各种功能,并且两者之间可以进行相互转换。

Dom对象转换jQuery对象:$(dom对象)

jQuery对象转换成Dom对象:jQuery对象[0]

<!DOCTYPE html>
<html>
<head>
    <meta charset=‘utf-8‘/>
    <title>jQuery</title>
</head>
<body>
    <div id="content">人生如烟,烟如雾。</div>
    <!--引入jQuery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // DOM操作
        // 获取文本
        var txt = document.getElementById(‘content‘).innerText;
        document.getElementById(‘content‘).innerText = ‘沙雕‘;
        // jQuery操作
        var text = $(‘#content‘).text();
        $(‘#content‘).text(‘二货‘);
        
        // Dom对象转换jQuery对象:$(dom对象)
        $(document.getElementById(‘content‘))
        // jQuery对象转换成Dom对象:jQuery对象[0]
        $(‘#content‘)[0]
    </script>
</body>
</html>

选择器

id选择器

HTML代码:

<div id="notMe">    
    <p>id="notMe"</p>
</div>
<div id="myDiv">白日依山尽</div>

jQuery代码:

$("#myDiv");

结果:

[<div id="myDiv">id="myDiv"</div> ]

class选择器

HTML代码:

<div class="notMe">窗前明月光</div>
<div class="myClass">疑是地上霜</div>
<span class="myClass">举头望明月</span>

jQuery代码:

$(".myClass");

结果:

[ <div class="myClass">窗前明月光</div>, <span class="myClass">举头望明月</span> ]

标签选择器

HTML代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

多选择器

HTML代码:

<div>鸡</div>
<p class="myClass">我顶你个肺</p>
<span>你太美</span>
<p class="notMyClass">哈哈哈哈哈哈</p>

jQuery代码:

$("div,span,p.myClass")

结果:

[ <div>鸡</div>, <p class="myClass">我顶你个肺</p>, <span>你太美</span> ]

层级选择器

HTML代码:

<form>  
    <label>Name:</label>  
    <input name="name" />  
    <div>      
        <label>Newsletter:</label>      
        <input name="newsletter" /> 
    </div>
</form>
<input name="none" />

jQuery代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

属性选择器

HTML代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz" />

<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码:

$("input[name=‘newsletter‘]")

结果:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" />, <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]

表单选择器

HTML代码:

<form>    
    <input type="button" value="Input Button"/>    
    <input type="checkbox" />    
    
    <input type="file" />    
    <input type="hidden" />    
    <input type="image" />    
    
    <input type="password" />    
    <input type="radio" />    
    <input type="reset" />   
    
    <input type="submit" />    
    <input type="text" />    
    <select>        
        <option>Option</option>    
    </select>    
    <textarea> </textarea>   
    <button>Button</button>
</form>

jQuery代码:

$(":text")          // 找到所有input标签且type=text的标签

//$(":input")      //找到所有input标签

//$(":password")   //找到所有input且type=password的标签

//$(":radio")      //找到所有input且type=radio的标签

//$(":checkbox")   //找到所有input且type=checkbox的标签

结果:

[ <input type="text" /> ]