jquery 介绍，如何使用 jquery 选取元素

Posted 2021-04-08 phpzheng

之前的三篇文章，给大家介绍了 html 的概念、常用的 html 标签、常用的 css 样式属性。

对于刚入门的 php 开发者来说，只需要掌握一定的 html 基础即可，随着开发经验和年限的提升，只要你不去排斥 html 知识，那么你写 html 的能力自然会提升上去的。

从今天开始，我们进入到关于 jquery 的分享阶段，jquery 学习起来很容易上手。

jQuery 是什么？
jQuery 是一个 javascript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下特性：
    HTML 元素选取
    HTML 元素操作
    CSS 操作
    HTML 事件函数
    JavaScript 特效和动画
    HTML DOM 遍历和修改
    AJAX
    Utilities

jQuery 如何使用？
我们只需要在 html 的页面上，引用一个 jquery 的库文件

<script src="http://phpzheng.com/tool/jquery.min.js" type="text/javascript"></script>

jQuery 选择器？

1、元素选择器

 $(function(){
        //表示选择了 p 标签，并取得元素的html内容
        $('p').html();
 })

2、#id 选择器

<input type="text" name="username" id="username">
$(function(){
        //表示选择了 id 为 username 的标签，并取得元素的值0
        $('#username').val(); 
})

3、.class 选择器

<input type="text" name="username" class="username">
$(function(){
        //表示选择了 class 为 username 的标签，并取得元素的值0
        $('.username').val(); 
})

4、更多选择器

选取所有元素
$("*")

选取当前 HTML 元素
$(this)

选取 class 为 intro 的 <p> 元素
$("p.intro")

选取第一个 <p> 元素
$("p:first")

选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first") 

选取每个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")

选取带有 href 属性的元素
$("[href]")

选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target='_blank']")

选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")

选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button")

选取偶数位置的 <tr> 元素      
$("tr:even")     

选取奇数位置的 <tr> 元素
$("tr:odd")

选择一个元素有多种方式，所以，我们要根据实际需求，使用最方便的方式去匹配元素。