jQuery 基本使用

作者: print("") 分类: WEB前端 发布时间: 2018-06-03 20:03

唔,常规使用方法,
首先呢下载一个 jQuey 把文件放在网站的一个目录下面然后去调用一下对方就行了

<script src="jquery-1.12.4.js"></script>

唔,就是这样去调用的。 jQuey的基本操作

 <div id='i10' class='c1'>
                <a>f</a>
                <a>f</a>
            </div>
            <div class='c1'>
               <a>f</a>
            </div>
            <div class='c1'>
                <div class='c2'></div>
            </div>

一、查找元素

1.1 通过ID去查找

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:
$("#myDiv")

1.2 class

 <div class='c1'></div>
$('.c1')

1.3 标签

            <div id='i10' class='c1'>
                <a>f</a>
                <a>f</a>
            </div>
            <div class='c1'>
               <a>f</a>
            </div>
            <div class='c1'>
                <div class='c2'></div>
            </div>
取出所以a标签
  $('a')
取到class 为c2的标签
  $('.c2')
1 4、组合

比如取出a标签西面的的class c2 里面的i10 

$('a,.c2,i10')

1.5. 层级

        $('#i10 a')  子子孙孙
        $('#i10 >a')  儿子

前端如下:

<div id='i10' class='c1'>
        <div>
            <a>f1</a>
            <a>f2</a>
        </div>

                <a liang="10">f3</a>
                <a>f4</a>
            </div>
            <div class='c1'>
               <a>f</a>
            </div>
            <div class='c1'>
                <div class='c2'></div>
            </div>
        <form>
          <label>Name:</label>
          <input name="name" />
          <fieldset>
              <label>Newsletter:</label>
              <input name="newsletter" />
         </fieldset>
        </form>
        <input name="none" />

取出第一个A标签

        $('#i10 a:first')
        $('#i10 div a:first')
1.6、 基本筛选
        :first
        :last
        :eq()
1.7. 属性
        $('[liang]')     具有liang 属性的所有标签
        $('[liang="10"]')   liang属性等于10 的标签
 $(':text')
        <input type='text' />
        <input type='text' />
        <input type='file' />
        <input type='password' />

        $("input[type='text']")
        $(':text')

        不可编辑的input
        $("input:disabled")

        可编辑的input
        $("input:enabled")
实例:
    多选、反选、全选 - 选择权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="liang();"/>
    <input type="button" value="反选" onclick="liangc();" />
    <input type="button" value="取消" onclick="clearAll();"/>
    <table border="1">
        <thead >
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>

    </table>
    <script src="jquery-1.12.4.js"> </script>
    <script>
        function liang() {
            $('#tb :checkbox').prop('checked',true);
        }
        function clearAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function liangc() {
            $(':checkbox').each(function (k) {
                //this,代表当前循环的每一个元素
                //反选
                // console.log(k,this);
                //Dom 实现
                // if(this.checked){
                //     this.checked=false;
                // }else{
                //     this.checked=true;
                // }
                //Jq
                // if($(this).prop('checked')){
                //     $(this).prop('checked',false);
                // }else{
                //     $(this).prop('checked',true);
                // }


                //三元运算
                //var v=条件? 真值: 假值
                var v=$(this).prop('checked')?false:true;
                $(this).prop('checked',v);


            })

        }
        
        
   </script>


</body>
</html>

PS :备注一波

            

                $(this).prop('checked');     获取值
                $(this).prop('checked',true);   # 设置值


            - $('#tb :checkbox').each(function(){
                //this DOM 对象 当前循环的元素
                // 变成JQ 对象。只要加一个$
                // k 是当前索引


            })
            -
           三元运算
            -var v=条件 ?真值: 假值
 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

说点什么

avatar
  Subscribe  
提醒