标签:OLE hidden inner res 结果 哈哈 head jquery选择器 min
先下载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>
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>
HTML代码:
<div id="notMe">    
    <p>id="notMe"</p>
</div>
<div id="myDiv">白日依山尽</div>
jQuery代码:
$("#myDiv");
结果:
[<div id="myDiv">id="myDiv"</div> ]
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" /> ]
标签:OLE hidden inner res 结果 哈哈 head jquery选择器 min
原文地址:https://www.cnblogs.com/Hedger-Lee/p/13062889.html