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方法的解读：

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编程基础

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

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实现全选和反选的案例

代码如下：

NEWS

网站建设资讯

Jquery编程基础

其他资讯