jQuery学习

jQuery 是一个模块 ======类库
Dom/Bom/JavaScript类的库
使用方法朝赵元素，操作元素
<link rel="style"/>

引入方法：

<link rel="stylesheet" href="css.css" />  //引入css文件
    <script src="commons.js"/>   引入js文件

jQurey 后面加个[0] 索引应用方法就和document 一样，转化为dom对象

jQurey 将dom对象转化成jQurey对象

选择器，直接找到某个或者某类标签
    1、id
　　　　<div id="c1"></div>
        $('#c1')
    2、class
　　　　<div class="c1"></div>
        $('.c1')
    3、标签，组合选择器
     <div class="c1">
            <a > a </a>
            <a > a </a>
        </div>
        <div class="c1">
            <a > a </a>
            <a > a </a>
        </div>
        <div class="c1">
            <div class="c2"></div>
        </div>
        $('a','.c2')  找到所有的a标签和c2标签 后面，写几个找几个
    4、层级选择器
　　 　　　　<div id="i1" class="c1"></div>
                    <a href="">1</a>
                      <a href="">2</a>
        <div class="c2"></div>
             <a href="">1</a>
        $('#i1 a')  找到是所有的a标签，，找子子孙孙
       $('#i1>a') 只找他的child

         6. 基本 
                $("tr:even")  查找表格的偶数  odd 查找表格的奇数
                $('#i10 a:first') 找到第一个
                :last  找到最后一个
                :eq()  根据索引找 里面从0开始
            7. 属性
                $('[root]')       具有root属性的所有标签
                $('[alex="123"]') alex属性等于123的标签
                
            
                <input type='text'/>
                <input type='text'/>
                <input type='file'/>
                <input type='password'/>
                
                $("input[type='text']") 可以根据表单前面的input来查找后面的属性
                $(':text')   前面加冒号可以简写

不可选编辑器补充

<input type="text" disabled />  #不可选泽编辑器
查找标签下不可选的编辑器$(':disabled')  

:enabled  可选编辑器

用jQuery进行全选多选

jquery判断checked的三种方法:
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false//别忘记冒号

<body >
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
<table border="1">
    <thead>

    <tr>
        <th>选项</th>
          <th>IP</th>
          <th>PROP</th>
    </tr>

    </thead>
    <tbody id="tb" >
        <tr>
            <td><input type="checkbox"/></td>
            <td><input type="checkbox"/>123</td>
            <td><input type="checkbox"/>123</td>
        </tr>
    <tr>
            <td><input type="checkbox"/></td>
            <td><input type="checkbox"/>123</td>
            <td><input type="checkbox"/>123</td>
        </tr>
    <tr>
            <td><input type="checkbox"/></td>
            <td><input type="checkbox"/>123</td>
            <td><input type="checkbox"/>123</td>
        </tr>
    <tr>
            <td><input type="checkbox"/></td>
            <td><input type="checkbox"/>123</td>
            <td><input type="checkbox"/>123</td>
        </tr>
    </tbody>
</table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $(":checkbox").prop('checked',true)

        }

       function cancleAll() {
            $(":checkbox").prop('checked',false)

        }
        
        function reverseAll(k) {
            $(':checkbox').each(function (){
        //each循环前面每一个元素,前面是dom对象
                // console.log($(this))加了$变成JavaScript对象
           if(this.checked){
               this.checked=false
           }else{
               this.checked=true
           }
            })

        }
    </script>

第二种用$(this) JavaScript对象实现反选

function reverseAll(k) {
            $(':checkbox').each(function (){

           if($(this).prop('checked')){//获取值
               $(this).prop('checked',false)
           }else{
              $(this).prop('checked',true)
           }
            })

        }

第三种三元运算符来实现反选

        function reverseAll(s) {
           // var v=条件？真值：假值
            $(':checkbox').each(function(k){
           var v1=$(this).prop('checked') ? false:true;
            $(this).prop('checked',v1);})


        }

JavaScript内置循环

$('#tb:checkbox').each(function(k){
                        // k当前索引
                        // this，DOM，当前循环的元素 $(this)

jQuery 筛选器使用

 筛选器：
             $(this).next()  下一个标签

　　　　　　　　$(this).nextAll 下一个的所有标签
　　　　　　　　$('#i1').nextUntil('#ii1')  直到找 i1标签为止

　　　　　　　　　　$(this).prev() 上一个
            $(this).parent() 父亲标签
　　　　　　　　$(this).parent 父亲循环 p div html
　　　　　　　　$(this).parentUntil('div') 找到div停下不找　　　　　　
           $(this).children() 孩子标签
           $('#i1').siblings()兄弟标签
           $('#i1').find() 子子孙孙中查找

　　　　　　　　　$('#i1').prevAll()
　　　　　　　　　$('#i1').prevUntil('#ii1')

样式操作：

样式操作： 
                $('li').addClass   增加标签
                $('li').removeClass 移除标签
                $('li').toggleClass

实现菜单栏收放

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function () {
           $(this).nextAll().removeClass('head')
            $(this).parent().siblings().find('.content').addClass('head')
        })
    </script>

链式编程支持一行解决

$(this).next().removeClass('head').parent().siblings().find('.content').addClass('head')

文本操作：

　　　　　　　　　　$(..).text()           # 获取文本内容
                $(..).text(“<a>1</a>”) # 设置文本内容
                
                $(..).html()    获取文本内容
                $(..).html("<a>1</a>")   设置文本内容
                
                $(..).val()   获取值
                $(..).val(..)

简单的模态编程框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.mode{
    position: fixed;
    top: 50%;
    left: 50%;
    height:500px;
    width: 500px;
    margin-left: -250px;
    margin-top: -250px;
z-index: 10;
    background-color:mediumorchid  ;
}
        .shadow{
            position:fixed;
            top: 0;
            right:0;
            left:0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body >
<a onclick="addElement();"  >添加</a>

 <table border="1">
     <tr>
         <td>1.1.1.1</td>
          <td>81</td>
          <td>
              <a class="edit">编辑 </a>丨<a>删除 </a>
          </td>
     </tr>
     <tr>
         <td>1.1.1.2</td>
          <td>82</td>
          <td>
              <a class="edit">编辑</a>丨<a>删除 </a>
          </td>
     </tr>
     <tr>
         <td>1.1.1.3</td>
          <td>83</td>
          <td>
             <a class="edit">编辑 </a>丨<a>删除 </a>
          </td>
     </tr>
     <tr>
         <td>1.1.1.3</td>
          <td>80</td>
          <td>
              <a class="edit">编辑 </a>丨<a>删除 </a>
          </td>
     </tr>
 </table>

<div class="mode hide">
    <div>
        <input name="hostname"  type="text"/> <br/>
        <input  name="port" type="text"/><br/>
        <input type="text"/><br/>

    </div>
    <div>
        <input type="button" value="登入"/>
        <input type="button" value="取消" onclick="conce();"/>
    </div>

</div>


<div class="shadow hide"></div>




    <script src="jquery-1.12.4.js"></script>
    <script>
function addElement() {
    $('.mode, .shadow').removeClass('hide')

}
   function conce() {
      $('.mode, .shadow').addClass('hide')
       $('.mode input[name="hostname"]').val('');
            $('.mode input[name="port"]').val('');

   }
        $('.edit').click(function () {
             $('.mode, .shadow').removeClass('hide');
            var rds=$(this).parent().prevAll(); // <a标签上一级标签是td  prevall上级所有的，找到所有td
            var port=$(rds[0]).text();//获取第一个元素
            var host=$(rds[1]).text();
            $('.mode input[name="hostname"]').val(host); //找到name-hostname的标签 获取到值为host的，试过value无效果。
            $('.mode input[name="port"]').val(port);
        })
    </script>

</body>
</html>

样式操作：

　　　　addClass
　　　　removeClass
　　　　toggleClass

开关效果

  开关效果
         第一种方法             $('i1').click(function () {
                        if($('.c1').hassClass('hide')){
                            $('.c1').removeClass('hide');
                            
                        }else{
                            $('.c1')/addClass('hide')
                        }
                        )
        第二种方法：
                $('c1').toggleGroup('hide'); 自动判断里面有误这个属性 自动添加删除
            
        })

属性操作：

表格操作：

  $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });

模拟淘宝评价详情点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height:38px;
            background-color: palevioletred;
            line-height: 38px;
        }
.hide{
    display: none;
}

.active{
    background-color: crimson;
}

        .menu .menu-item{
            float: left;
            border-right: 1px solid darkorchid;
            padding:0 5px;
            cursor: pointer;
        }

        .content{
            min-height: 50px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
<div style="width: 700px;margin: 0 auto;">

    <div class="menu">
        <div class="menu-item active" a="1"> 菜单一</div>
        <div class="menu-item" a="2">菜单二</div>
        <div class="menu-item" a="3">菜单三</div>
    </div>

    <div class="content">
        <div b="1">内容一</div>
        <div class="hide" b="2">内容二</div>
        <div class="hide" b="3">内容三</div>
    </div>

</div>

<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var target=$(this).attr('a')
        $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide')
    })

</script>
</body>
</html>

用索引的方式获取：

<script type="text/javascript">
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');

        $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
    })

</script>

添加值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="t1">
<input  id="a1" type="button"value="添加" />
<ul class="ui">
    <li>1</li>
    <li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v=$('#t1').val()
        var temp="<li>"+v+"</li>"
        $('.ui').append(temp)// 再之后添加
        //prepend 再之前添加
        //after 再ui后添加
        //before  再ui之前添加

    })
</script>
</body>
</html>

文档操作

文档处理：
                append   再末尾增加一个数值
                prepend  再最前面增加一个数值
                after  再ul 兄弟后添加一个数值

                before 再ul 兄弟前添加一个数值
                
                remove  删除一行全部
                empty  只删除内容  标签不删除
                
                clone  复制
        css处理

动态效果模拟点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border:1px solid #dddddd;
        }
.item{
    position: relative;
    width:30px;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>

    </div>
  <div class="container">
        <div class="item">
            <span>赞</span>
        </div>

    </div>  <div class="container">
        <div class="item">
            <span>赞</span>
        </div>

    </div>  <div class="container">
        <div class="item">
            <span>赞</span>
        </div>

    </div>

<script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            addFavor(this)
        });
        function addFavor(self) {
            var fontSize=15;
             var top=0;
             var right=0;
             var opacity=1;


            var tag=document.createElement('span')
            $(tag).text('+1');
            $(tag).css('color','red')
            $(tag).css('position','absolute')
            $(tag).css('fontSize',fontSize+'px')
            $(tag).css('right',right+'px')
            $(tag).css('top',top+'px')
            $(tag).css('opacity',opacity)

            $(self).append(tag)
            var obj=setInterval(function () {
               fontSize=fontSize+5;
            top=top-5;
              right=right-5;
            opacity=opacity-0.1;

                      $(tag).css('fontSize',fontSize+'px')
            $(tag).css('right',right+'px')
            $(tag).css('top',top+'px')
            $(tag).css('opacity',opacity)
console.log(opacity)
                if(opacity<0){
                    clearInterval(obj)
                    $(tag).remove()
                }
            },50)

        }
    </script>

</body>
</html>

位置参数

$(window).scrollTop()  获取滑轮位置
        $(window).scrollTop(100)  设置滑轮位置
        $(window).scrollLeft（）  左边

        $('.item').offset()  获取当前坐标
         $('.item').offset().left()

position()                       指定标签相对父标签(relative)标签的坐标
            <div style='relative'>
                <div>
                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>
                </div>
            </div>
            
            
            $('i1').height()           # 获取标签的高度 纯高度
            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
            # 纯高度，边框，外边距，内边距

绑定事件

DOM： 三种绑定方式
                jQuery：
                    $('.c1').click()
                    $('.c1').....
                    
                    $('.c1').bind('click',function(){
                        
                    })
                    
                    $('.c1').unbind('click',function(){
                        
                    })
                    
                    *******************
                    $('.c').delegate('a', 'click', function(){
                    
                    })
                    $('.c').undelegate('a', 'click', function(){
                    
                    })
                    
                    $('.c1').on('click', function(){
                    
                    })
                    $('.c1').off('click', function(){
                    
                    })

绑定方式重要的

    $('.c').delegate('a', 'click', function(){//委托 开始时没有绑定事件，当点击时候再绑定  》》》》》》》》》》》》》》》点那个绑定那个
                    
                    })

表单验证登入

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .Error{
            color: red;
        }
    </style>
<body>
<form id="f1" action="http:\\www.baidu.com" method="GET">
    <div><input type="text" name="n1"></div>
    <div><input type="password" name="n2"></div>
    <div><input type="text" name="n3"></div>
    <div><input type="text" name="n4"></div>
    <input type="submit" value="提交">


</form>




<script src="jquery-1.12.4.js"></script>
    <script>
$(':submit').click(function () {
    $('.Error').remove()
    var fag=true;
    $('#f1').find('input[type="text"],input[type="password"]').each(function () {
        var v=$(this).val();
        if(v.length<=0){
            fag=false;
            var tag=document.createElement('span');
            tag.className='Error';
            tag.innerHTML='*必填'
            $(this).after(tag);

        }

    })
    return  fag

});


    </script>

</body>
</html>

jQuery扩展

    jQuery扩展：
            - $.extend        $.方法  
            $.extend({
'xxx':function(){

return 'xx'}    

var v=$.xxx();        
})
            - $.fn.extend     $(..).方法
        $.fn.extend({
'xxx':function(){
return 'xx';
}
})

var v=$('i1').xxx

jQuery扩展

        jQuery扩展：
            - $.extend        $.方法  
            $.extend({
'xxx':function(){

return 'xx'}    

var v=$.xxx();        
})
            - $.fn.extend     $(..).方法
        $.fn.extend({
'xxx':function(){
return 'xx';
}
})

var v=$('i1').xxx

            
            (function(){
                var status = 1;
                // 封装变量
            })(jQuery)

阻止事件发生

    阻止事件发生
                    return false
                    
                # 当页面框架加载完成之后，自动执行
                $(function(){
                    
                    $(...)
                    
                })

posted on 2017-09-23 23:07 喵吉欧尼酱阅读(261) 评论(0) 收藏举报

刷新页面返回顶部

喵吉欧尼酱

公告