走入jquery的世界

来源：互联网发布：远光软件股份有限公司编辑：程序博客网时间：2024/04/30 11:53

jquery的概念：
jquery是一个JavaScript库极大的简化了JavaScript的编程。其拥有强大的选择器支持，不仅支持css中选择器。同时也拥有其独特的选择器，同时也解决了各种浏览器的兼容问题。
jquery 选择器：
a:基础选择器，
b:层级选择器，
c:属性选择器，
d：伪类选择器；
基本的基础选择器有：
id选择器 ————–$(‘#id_name’)
元素选择器————$(‘tag_name’)
类选择器—————$(‘.class_name’)
群组选择器————$(‘class_name1,class_name1’)

层级选择器有:

后代选择器————$(‘M N’)
子代选择器————$(‘M>N’)
兄弟选择器————$(‘M~N’)
相邻选择器————$(‘M+N’)

暂时记录这些选择器，以后再做补充。
这里先处理一些问题：

jquery和就JavaScript的共存和混用：
首先要弄清楚的一个问题是jquery和JavaScript是可以共存的但是两者是不可以混用的：
函数的效果：父子的div，点击子div让父div的style发生改变；

    <body>        <div id="box">            <div class="box1"></div>        </di>    </body>

给两个div添加样式

       #box{            height: 100px;            width: 100px;            background: red;        }        .box1{            height: 50px;            width: 50px;            background: blue;        }

混用如下错误的写法：

    $(document).ready(function(){        $('#box').click(function(){            $(this).style.background='blue';        })    })

很显然这种效果是不会出现的，这里有2种方法可以将上述的函数div添加效果

$(document).ready(function(){        $('#box').click(function(){            $(this).get(0).style.background='blue';        })    })$(document).ready(function(){        $('#box').click(function(){            $(this).css('background','blue');        })    })

第一中方法的get（0）是将jquery中获取dom节点变成了原生的就javascript的方法；第二种方法是基本的jquery的方法；

outWidth（）和offsetWidth（）方法
思考：获取有个div的宽度用什么方法：
当然还有一种方法，

   <div id="box">        <div class="box1"</div>    </div>

    #box{        height: 100px;        width: 100px;        background: red;        padding:5px;    }

    $(document).ready(function(){        alert($('#box').css('width'));        alert($('#box').outerWidth());        alert($('#box').innerWidth());    }）

alert出的值分别是100px 110 和110

text（）和html(）的区别是；

  <p>hello</p>  <p>word</p>

alert($('p').text();alert($('p').html();

同样都是输出p标签里的内容；

 alert($('p').text('<h1>hello</h1>'));

输出

alert($('p').html('<h1>hello</h1>'));

输出

hello

remove（）和detach（）方法的区别
同样是删除一个元素那么他们有什么区别呢。这边就是简单的一下介绍，两种情况：
思路：如果是一个没有添加方法元素块，那么remove（）和detach（）就都可以，如果有一个添加方法的的块元素，删除后又添加，如果用remove（）添加后其之前的方法就不可以用了，如果是用detach（）方法删除后在添加后之前的方法还是可以用的，只不过块元素的位置可能发生变化；

择父级元素；

 $('.box1').parent().css('background','green');

选择父级及以上元素；

 $('.box1').parents('#box').css('background','green');

选择靠近自己的父级元素，必须传参；

 $('.box1').closest('#box').css('background','red');

选择同级的兄弟节点。传参表示筛选；

$('.one').siblings('.two') .css('background','red');

next() 不能传參；nextAll()可以传參选择的

$('.two').next().css('background','yellow');$('.two').nextAll('.a').css('background','yellow');

可以不传參表示到最后，传參则表示在传參的之前

$('.one').nextUntil('.b').css('background','blue');

filter（）和not（）方法的作用是相反的

$('ulli').css('background','green').filter('.a').css('background','red');$('ulli').css('background','green').not('.a').css('background','red');

单独装箱，每个节点都会打包

 $('span').wrap('<div>')

可以多个相同的标签装箱；选中所有节点，集体打包；若果其中出现不一致的标签，其他标签会被剔除来；

   $('span').wrapAll('<div>');

body 是不肯能拆的，只能拆其父元素；、

$('span').unwrap();$('span').unwrap('<body>');

阅读全文

0 0