您的位置：首页 > Web前端 > JQuery

jQuery实现添加“成绩单” 搜索功能和清除功能

2016-06-08 10:57 513 查看 
遇到的问题有：
<span style="white-space:pre">	</span>最大的问题就是遇到了jQuery对象和DOM对象的转化。刚开始不知道有jQuery和dom之间的转化问题，就糊里糊涂的把jQuery对象转换成了DOM对象，然后在使用jQuery方法时就出问题了。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery.js"></script><style type="text/css"></style></head><body><input type="text" placeholder="请输入姓名" /><input type="text" placeholder="请输入年龄" /><input type="text" placeholder="请输入性别" /><input type="button" value="注册" /><input type="text" placeholder="请输入搜索内容" /><input type="button" value="搜索" /><input type="button" value="清除" /></body><script type="text/javascript">$('input[value=注册]').click(function(){var name = $('input[placeholder=请输入姓名]').val();var age = $('input[placeholder=请输入年龄]').val();var man = $('input[placeholder=请输入性别]').val();//console.log( $('input[placeholder=请输入年龄]'))$('input[placeholder=请输入姓名]').val('');$('input[placeholder=请输入年龄]').val('');$('input[placeholder=请输入性别]').val('');var $wrap = $('<div></div>');var $name = $('<span></span>');var $age = $('<span></span>');var $man = $('<span></span>');$wrap.css({'border':'1px red solid ',width:'500px'})$name.text(name);$age.text(age);$man.text(man);$('body').append($wrap);$wrap.append($name);$wrap.append($age);$wrap.append($man);$('span').css('padding','10px 50px');$wrap.css('padding','20px 0');// 搜索功能})$('input[value=搜索]').click(function(){var content = $('input[placeholder=请输入搜索内容]').val();$('input[placeholder=请输入搜索内容]').val('');//alert($('span').first().text())$.each($('span'),function(index,value){//console.log(value.innerHTML)//console.log(content);if(content == value.innerText){$('span').eq(index).css('background','red')}})})$('input[value=清除]').click(function(){$.each($('span'),function(index,value){value.style.background  = '';})})</script></html>
<img src="https://img-blog.csdn.net/20160608110055990?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航