走入jquery的世界

最新推荐文章于 2021-04-01 17:33:40 发布

Renkx0404

最新推荐文章于 2021-04-01 17:33:40 发布

阅读量381

点赞数

本文链接：https://blog.csdn.net/Renkx0404/article/details/75448297

版权

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>');

Renkx0404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
走入jquery的世界

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

扫一扫