jQuery初识(20171025)

1.jQuery

1.jQuery

<script>
    //alert($);
    //alert(jQuery);
    //所有函数都有一个原型对象(prototype)

    //查看jquery版本
    //alert(jQuery.fn.jquery);

    //alert( jQuery.prototype );
    //alert(jQuery.fn ===jQuery.prototype)

</script>

2.入口函数的比较

<script>
        //原生js
        window.onload = function(){
            var FirstP =document.getElementById("first");
            FirstP.innerHTML = "hello world";
        };
        //jq
        //$(document).ready()事件发生时表示dom元素已就绪,但是不会等页面的图片等加载
        //所以比window.onload要快
        $(document).ready(function(){
            $("#second").html("hello jquery")
        });
        //jq简写
        $(function(){
            $("#third").html("hello today")
        })
    </script>

3.DOM对象与jQuery对象的相互转换

<script>
    //dom对象转换为jq对象
    //var firstp = document.getElementById("first");
    var firstp = document.getElementById("first");
            //console.log($(firstp));
    //$(firstp).html("hello world!")

    //jq对象转换为dom对象
    $("#second")[0].innerHTML = "我是第二个标签";
    $("#third").get(0).style.background = "blue";


</script>

4.jq的循环

<body>
<p id="first"></p>
<p id="second"></p>
<p id = "third"></p>
</body>
<script>
   $("p").each(function(index){
       //此处的this是dom对象,可以使用$(this)转换为jq对象
       $(this).html(index+1);
       //this.innerHTML = index+1;
   })
</script>
结果:
//  1
//  2
//  3

5.jq修改css

<style>
        #first{
            color: red;
        }
    </style>
<div>
    <p id="first">1111</p>  //显示的是蓝色
    <p id="second">2222</p>
    <p id = "third">3333</p>
</div>

<script>
$("#first").css("color","blue");//jq修改样式其实是给元素添加了style属性,即行内样式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网软件技术

添加标签——无给定标签选项

1283
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

2992
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

3437
来自专栏柠檬先生

css3弹性盒子模型——回顾。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

2248
来自专栏专业duilib使用+业余界面开发

duilib自绘

2083
来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

3146
来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

883
来自专栏九彩拼盘的叨叨叨

图片占位服务 Placeholder 写法示例

在做页面时,页面上的一些图片需要找临时图片来占位。Placeholder 提供好用的占位图服务。

1203
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

4579
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

1123

扫码关注云+社区

领取腾讯云代金券