甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Jquery编程基础

1、Jquery

创新互联公司成立十多年来，这条路我们正越走越好，积累了技术与客户资源，形成了良好的口碑。为客户提供做网站、成都做网站、网站策划、网页设计、国际域名空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等，这些对于网站建设都非常重要，创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案，携手广大客户，共同发展进步。

  (1)、Jquery是一个兼容多浏览器的js库，其核心理念：将js和DOM编程封装起来了，使得开发更加的便捷；

  (2)、jquery的中文文档：http://www.php100.com/manual/jquery

其内容大致如下：

Jquery编程基础

  (3)、去Jquery官网下载一个jquery文件，的引入到你所编程的目录下面。

此时就可以用Jquery提供的各种函数了；

  (4)、引入Jquery后的代码模型：




    
        
        页面一
    
    
    
    
          
          
            
        
        
    

2、常用部分方法

  (1)、选择器

  i>、id选择器：$("#id名字")

  ii>、标签选择器：$("div")

  iii>、class选择器：$(".class名字")   这些选择器中间以\,分开，可以同时去找。

  iv>、层级选择器：$("form div")

  (2)、input系列下的

  i>、$(":text")  <==>  $("input[type = 'text']")

对于其text/html方法的解读：




    
        
        页面一
    
    
    
        1234
                                           text = $('#id1').text();               html = $('#id1').html();               value = $('#id1').text("abc");                        

对于jquery来说，基本上对方法都满足：空的为取值，不空为赋值；

 ii>、例：



取出value的值：$("input[name = 'username']").val();
修改value的值：$("input[name = 'username']").val('abc');
取出其属性：$("input[name = 'username']").attr('name');
修改了name的属性：$("input[name = 'username']")..attr('name', 'ok');

  iii>、例：



默认所有的checkbox都选中：$("input[type = 'checkbox']").prop('checked', true);
此时只显示,不可用这个小框框：$("input[type = 'checkbox']").prop('disabled', true);

  iv>、追加样式：

$('.c1').addClass('c2');  //所有的c1这个样式的再加上c2样式
$('.c1').removeClass('c2');  //所有的c1这个样式的再删除c2样式
$('.c1').toggleClass('c2');  //所有的c1这个样式加上c2样式,在按一次又删除c2样式,再按一次又添加成c2样式；
来回的添加,删除c2样式；

3、回滚顶部

  (1)、Jquery中最重要的函数：

$(function(){
    
})

上面这个函数是Jquery中最特殊的函数：当页面加载完成之后，默认会执行这么一个函数

$：Jquery所特有的；只有当引用了Jquery之后，$才变得有意义！！！

  (2)、回滚顶部的例子

scroll：当页面滚动条发生变化的时候执行的函数；

代码如下：

 


    
        
        页面一
        
    
    
    
    
        返回顶部
        以下都是内容.........
                              $(function(){                 //当页面(框架)加载完成之后,默认执行该函数;                 $('#return_top').click(function(){                     $(window).scrollTop(0);  //回到顶部                 })                 //换了一种绑定事件的方式;             })             $(window).scroll(function(){                 //console.log(123);   //滚动一次滑轮,这里边的函数执行一次;                 var height = $(window).scrollTop();//取得滚动条距顶部的高度;                 console.log(height);                 if(height > 0){                     //显示返回顶部                     $('#return_top').removeClass('hide');                  }else{                     $('#return_top').addClass('hide');                     //隐藏返回顶部                                      }             });             /*             function Go(){                 $(window).scrollTop(0);             }             */              

运行结果

Jquery编程基础

Jquery编程基础

随着滚动条的下拉，会出现一个返回顶部的按钮，按一下，返回顶部，按钮随之消失。


4、文本操作

  (1)、追加

$('p').append('hello');   //在所有的p标签的内容后面加上hello

完整代码如下：




    
        
        页面一
        
    
    
    
        
 I would like to say:

        
        
        
        
        
            $(function(){
                $('#addId1, #addId2').click(function(){
                    //获取当前点击的标签;
                    var curId = $(this).attr('id');
                    if(curId == 'addId1'){
                        //$('p').append('alex ');
                        //$('p').text('I would like to say: alex');
                        $('p span').text('alex');
                    }else if(curId == 'addId2'){
                        //$('p').append('oldboy ');
                        //$('p').text('I would like to say: oldboy');
                        $('p span').text('oldboy');
                    }else{
                    
                    }
                    //$('p').append('alex');
                });
            })
        
    

上面的$(this)：表示你点击的当前的那个标签。


5、搜索框的Jquery实现

代码如下：




    
        
        页面一
        
    
    
    
        
    
        
        
            $(function(){
            //链式表示：$('this').focus(function(){}.blur(function(){}).click(function(){})
                $('#tip').focus(function(){
                    //$('#tip') $(this)
                    var id = $(this);
                    id.addClass('black');
                    
                    if(id.val() == '请输入关键字' || id.val().trim() == ''){
                        id.val('') ;
                    }
                    
                })
                $('#tip').blur(function(){
                    var id = $(this);
                    var val = id.val();
                    
                    if(val.length == 0 || id.val().trim() == ''){
                        id.val('请输入关键字');
                        id.attr('class', 'gray');  //修改其属性为灰色
                    }else{
                        id.attr('class', 'black');  //修改其属性为黑色
                    }
                })
                
            })
        
        
    


6、Jquery实现全选和反选的案例

代码如下：




    
        
        页面一
    
    
    
        
            篮球
            足球
            羽毛球
        
                                                                           $(function(){                 $('#selectAll').click(function(){                     $('#checklist :checkbox').attr('checked', true);                 })                 $('#unselectAll').click(function(){                     $('#checklist :checkbox').attr('checked', false);                 })                 $('#reverseAll').click(function(){                     $('#checklist :checkbox').each(function(){                         var curStatus = $(this).attr('checked');                         $(this).attr('checked', !curStatus);                     })                 })                              })                       

运行结果

Jquery编程基础

Jquery还有好多其他常见的方法，只有掌握一些常用的，其他的用到时在快速查找，掌握使用即可!!!



文章标题：Jquery编程基础
网站网址：http://chengdu.cdxwcx.cn/article/joeggp.html

其他资讯