jq_基础

来源：互联网发布：方舟画面优化设置编辑：程序博客网时间：2024/05/22 10:50

jquery判断元素是否隐藏的多种方法
JQ中文网API
JQUI API

$ 等于 jQuery

$ 等于 jQuery$(function(){}) 等于 $(document).ready(function(){})表示整个文档加载完成后再执行相应的函数。$(function(){选择器 > 表示子元素 $('#nav>ul>li').mouseover(function(){ children 只获取子元素，不获取孙元素 $(this).children('ul').show() })  $('#nav>ul>li').mouseout(function(){   $(this).children('ul').hide()   }) })

简介

//JQ : jQuery 的简称//JS : Javascript的简称//JQ是基于JS封装的一个强大的插件//插件 ： 由程序员进行代码的封装流出方法名，供使用者直接进行调用，并实现复杂功能//注意：(重点)//JQ与JS不能混用， //什么是混用？//也就是JQ的属性或方法不能调用JS的属性和方法，//但是可以共存//如果你想用JQ获取的标签调用JS的属性和方法，需要先把JQ对象转化为JS对象，才能调用JS属性和方法

$() 选择器

//$() 选择器 -> 获取指定的一个或者多个标签//$() 它也是JQ最强大的功能//html() JQ的这个方法等同于我们JS里的innerHTML//var a = $("#myDiv").html("wang");

点击添加红色DIV

<head><meta charset="UTF-8"><title></title><script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><script type="text/javascript">    $(document).on("click", function() {        var myD = $("<div></div>"); //创建标签，调前是JQ的对象        //在这里修改CSS样式        myD.css({             width : Math.random() * (300- 100 + 1) + 100,            height : Math.random() * (300- 100 + 1) + 100,            background : randColor(),            display : "inline-block",        });        $("body").append(myD);    });    function randColor() {        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);        return "rgb(" + r + "," + g + "," + b + ")";    }</script></body>

遍历获取标签数组

<head><meta charset="UTF-8"><title></title><script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p><script type="text/javascript">//odd 偶数  even  奇数     $("p:odd").css({        "background" : "red",    })     $("p").each(function(ind){        if(ind % 2 == 0){            //把JS对象转化为JQ对象 **********重要            //$（）括起来            $(this).css({                "background" : "red",            })        }else{            $(this).css({                "background" : "blue",            })        }     })    for(var i = 0; i < $("p").length; i++){        if(i % 2 == 0){            $("p").eq(i).css({                "background" : randColor(),            })        }    }    function randColor() {        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);        return "rgb(" + r + "," + g + "," + b + ")";    }</script></body>

JQUI 效果参考API

//$("img").eq(i).toggle("blind", {direction : arr[rand]});//$( "img" ).eq(i).toggle( "bounce", { times: 3 }, "slow" );//$("img").eq(i).toggle("clip", {direction : arr[rand]});//$("img").eq(i).toggle("drop", {direction : arr[rand]});//$("img").eq(i).effect("bounce", "300", "slow" );//$("img").eq(i).effect("explode", {pieces : 81} );//$("img").eq(i).effect("fade" );//$("img").eq(i).toggle("fold");//$("img").eq(i).hide( "up", { direction: arr[rand] }, "slow" );//$("img").eq(i).toggle("highlight" );  //好看//$("img").eq(i).toggle("puff"); //放大//$("img").eq(i).toggle("pulsate", {pulse : 10} ); //跳動 //$("img").eq(i).toggle("scale", {direction : "vertical"});//縮小//$("img").eq(i).toggle("shake", {times : 5});//$("img").eq(i).toggle("slide", {direction : arr[rand]} );

0 0

jq_基础

$ 等于 jQuery

简介

$() 选择器

点击添加红色DIV

遍历获取标签数组

JQUI 效果 参考API

JQUI 效果参考API