美文网首页
第一课

第一课

作者: 帕西呢么 | 来源:发表于2016-12-14 15:18 被阅读0次

什么是JQ？

一个优秀的JS库 写越少的代码，做越多的事情

JQ的好处？

  • 简化JS的复杂操作
  • 不再需要关心兼容性
  • 提供大量实用方法

JQ官网

jquery的版本

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。

压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

如何使用JQ

  1. 官网下载jquery.js文件
  2. 导入jquery文件<script src="jquery.js"></script>

选择元素

  • $()
  • css()
<div id="div1" class="div1"></div>
<script>
document.getElementById('div1').style.background = 'red';
document.getElementsByClass('div1')[0].style.background = 'red';
document.getElementsByTagName('div')[0].style.background = 'red';

//jq选择元素的风格是跟CSS风格特别类似

$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

</script>
  • 省略原生的循环操作
<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
for(){
    aLi[i].style
}

$('li').css('background','red');//当选中的是个集合，那么css内部执行的一个循环操作，来修改里面集合的css样式。jquery内部旧执行了个循环操作
</script>

  • $ 和 jQuery

    • $ === jQuery
    • $是jQuery的别名
    • 为了简便, 我们通常使用$
jQuery('#div1').css('background', 'red');

绑定事件

通过调用的jquery对象上的click方法来

$("div").click(function(){});
  • this指向

指向触发事件的原生dom对象

$("div").click(function(){
    alert(this.innerHTML)
})

html()

作用和innerHTML类似，只是该方法可以给多个元素进行操作。

传递字符串参数表示赋值，返回jquery对象。

不传参数，就表示取值。

var $div = $('#div1');

$div.click(function(){
    alert(  $div.html()  );
});

JS与JQ关系

  • jq也是js
  • js原生dom对象与jq对象不能混用
alert(  $div.html()  );  //纯JQ写法

alert( document.getElementById('div1').innerHTML );  //纯JS写法

alert( $div.innerHTML );   //错误的
alert( document.getElementById('div1').html() );  //错误的
  • 例子 : 选择颜色填充方块

取值与赋值的关系

我们知道原生js中取值与赋值是通过直接操作对象属性来实现的

比如说innerHTML 属性

oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//赋值

在jquery中,实现相同的操作

$div.html();//取值
$div.html('text');//赋值

可以看到是否取值或赋值是通过传入参数的个数决定的

具有相同特征的还有

  • css()
  • attr() 属性
  • val() 值

等方法

<div id="div1" class="div1" data-index="1"></div>
<input type="text" value="123">

$('#div1').css('color','red');
alert( $('#div1').css('color') );  //red


$('#div1').attr('title','hello');

alert( $('#div1').attr('title') );//获取title属性
alert( $('#div1').attr('class') );//获取class
alert( $('#div1').attr('data-index') ); //获取自定义属性

$('input').val('456');//设置value值
alert( $('input').val() );//获取value值

多元素取值

jq中查找到多个元素, 取值取第一个元素的值

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

<script>
alert($('ul li').html() );//001
</script>

属性选择器

css选择器中大多的语法都可以在jquery中使用

包括属性选择器

<input type="text" value="123">
<input type="text" value="456">
<input type="text" >

<script>
$('input[value]').css('background', 'red');//有value属性的会被选中
$('input[value=123]').css('background', 'red');//value值等于123的会被选中

</script>

<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">

<script>
$('input[value^=123]').css('background', 'red');//选中以123开头的
$('input[value$=555]').css('background', 'red');//选中以555结尾的
$('input[value*=3]').css('background', 'red');//选中包含3的

</script>

引号的问题

$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');

上面的代码加不加引号都是正确的

什么时候必须加引号呢？

<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//当属性的值有空格的 会报错
</script>

这个时候我们就必须加上引号

$('div[class="box box1"]').css('background', 'red');

JQ的链式操作

一步一步的操作：

var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
    alert('111');
})

链式操作 :

$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});

注意: JQ中的可以链式操作的是针对设置的操作， 取值的操作不能进行链式操作

JQ实战小技巧

命名的规范

$div $span

JQ的容错性

<div id="div1"></div>

<script>
var oDiv = document.getElementById('div2');
oDiv.innerHTML = 'bbb';//会报错
</script>

在原生js种， 如果没有找到相应的DOM元素， 执行后续操作会报错

<div id="div1"></div>

<script>
$("#div2").html('bbbb');
</script>

在JQ中没有找到也不会报错， 最多是不执行任何的操作

这就是JQ的容错性

它是把双刃剑:

  • 优点： 不报错， 不影响后续代码的执行
  • 缺点： 不好调试

集合的长度

$()获取到的都是一个集合

集合中只有一个元素，它也是一个集合　$('#id');

它的结构很像数组，有下标， 有length

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script>
var $li = $('ul li');
alert($li[0].innerHTML);
alert($li.length);
</script>

JQ实战小技巧

利用length判断元素是否存在

var $span = $('#span1');
console.log( $span.length );
$span.html('bbbb');

class的操作

  • addClass()
  • removeClass()
  • toggleClass()
<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不执行任何操作
$div.addClass('box4 box5');//增加多个class, 用空格隔开

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.removeClass('box1');//删除class
$div.removeClass('box3');//删除class, 如果存在, 不执行任何操作
$div.removeClass('box4 box5');//删除多个class, 用空格隔开

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
$('#div1').toggleClass('box3');
</script>

显示隐藏

  • show()/hide()

相关文章

  • 这一堂开学必修课，毕业10年的我才懂

    这两天盆友圈里被“开学第一课”刷屏了（据说别名：广告第一课/失信第一课/娘炮第一课），说实话我没有看节目，不妄作评...

  • 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫

    系列教程 手把手教你写电商爬虫-第一课 找个软柿子捏捏 如果没有看过第一课的朋友，请先移步第一课，第一课讲了一些基...

  • 我的科技梦

    《开学第一课》观后感 9月2日晚上，我们学校组织班会课观看《开学第一课》，每年《开学第一课...

  • 英语入门第1课第1节主语

    第一课 句子成分与基本句型 (Nick：第一课的内...

  • 基础素描

    第一课

  • 股票

    第一课

  • 开学第一课

    开学第一课有好几个: 第一个，北京市安全第一课； 第二个，中央电视台开学第一课； 第三课，房山区家长开学第一课。 ...

  • 我家的《开学第一课》

    我家的《开学第一课》 今天早晨看到央视的《开学第一课》被炮轰了。家里没有电视，所以我们没有看到《开学第一课》，也没...

  • 奋斗成就梦想

    ‘观2022年《开学第一课》有感 金风送爽，稻谷飘香，硕果累累的秋天里迎来了《开学第一课》。今年《开学第一课...

  • 开学第一课

    开学第一课，创造向未来。每年的开学第一课的主题都不同，而这次开学第一课的主题是创造向未来。这个节目差不多...

网友评论

      本文标题：第一课

      本文链接：https://www.haomeiwen.com/subject/njvauttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|第一课|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！