JQUERY Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM

jQuery对象

JQUERY Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM_第1张图片


使用jQuery放大字体


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script src="../js/jquery-1.11.1.js">script>
<script>
    function bigger() {
        //获取段落原来的字号(16px)
        var size = $("p").css("font-size");
        //去掉单位以便于计算
        size = size.replace("px","");
        //字号+1再设置给所有段落
        $("p").css("font-size",++size+"px");
    }
script>
head>
<body>
    <input type="button" value="+"
        onclick="bigger();"/>
    <p>1.jquery是一个轻量级的框架p>
    <p>2.它提供了简洁而统一的APIp>
    <p>3.它极大的提高了js编程效率p>
body>
html>

使用jQuery,点击图片后放大,缩小


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script src="../js/jquery-1.11.1.js">script>
<script>
    function prt() {
        console.log($("p"));
        for(var i=0;i<$("p").length;i++) {
            console.log($("p")[i].innerHTML);
        }
    }
    function chg(img) {
        if($(img).width()==218) {
            $(img).width(250).height(250);
        } else {
            $(img).width(218).height(218);
        }
    }
script>
head>
<body>
    <input type="button" value="打印"
        onclick="prt();"/>
    <p>1.jQuery对象本质就是对DOM数组的封装p>
    <p>2.jQuery对象包含很多操作DOM数组的APIp>
    <p>3.只有jQuery对象能调用jQuery的APIp>
    <div>
        <img src="../images/01.jpg" 
            onclick="chg(this);"/>
        <img src="../images/02.jpg"
            onclick="chg(this);"/>
        <img src="../images/03.jpg"
            onclick="chg(this);"/>
    div>
body>
html>

选择器


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script src="../js/jquery-1.11.1.js">script>
<script>
    //等价于
    //window.οnlοad=function(){}
    $(function(){
        //1.基本选择器
        //2.层次选择器
        console.log($("#gz+"));
        //3.过滤选择器(*)
        //1)基本过滤(*)
        console.log($("li:first"));
        console.log($("li:even"));
        console.log($("li:lt(2)"));
        console.log($("li:not(#gz)"));
        //2)内容过滤
        //3)可见性过滤
        //4)属性过滤
        //5)状态过滤
        //4.表单选择器
    });
script>
head>
<body>
    <ul>
        <li>北京li>
        <li>上海li>
        <li id="gz">广州li>
        <li>深圳li>
        <li>杭州li>
        <li>天津li>
    ul>
body>
html>

你可能感兴趣的:(Java)