jQuery介绍——新手必看

一、入口函数

1.JS入口函数
window.οnlοad=function(){
    //执行内容
}

2.jquery入口函数
$(documnet).ready(function(){
    //执行内容
});
或者
$(function(){
    //执行内容
});

二、原生js节点向jquery转换

var div=document.getElementById("box");
$("#box").get(0)与div相同

三、jquery-css基础选择器

    

    
    

1.层次选择器

$("*").css("background","green");
$("ul li:first").css("background","pink");
$("li:even").css("background","blue");
$("li:odd").css("background","green");
//紧邻选择器，后面一个
$("li.demo+li").css("background","pink");
//相邻选择器，后面所有
$("li.demo~li").css("background","pink");

2.表单域选择器

$(":text").val("请输入你的名字");
$(":password").val("12345");
$("p:hidden").show(3000);
$(":disable")
$(":visiable")

3.伪类选择器

$("li:first").css("background","red");
$("li:last").css("background","blue");
$("li:even").css("background","skyblue");
$("li:odd").css("background","pink");
$("li:eq(1)").css("background","red");
$("li:not(:empty)").css("background","blue");

4.内容选择器

$("p:contains('足球小子')").css("color","red");
$("p:has('span')").css("color","blue");

5.属性选择器

$("input[type='text']").val("");
$("input[type*='t']").val("");
$("input[type^='t']").val("");
$("input[type~='text']").val("");
$("input[type!='text']").val("");

6.子元素过滤器

$("ul li:first")选取第一个

元素的第一个
• 元素
  $("li:first").css("background","red");
  $("li:last").css("background","blue");

  $("ul li:first-child")选取每个

  元素的第一个
  • 元素
    $("li:first-child").css("background","red");
    $("li:last-child").css("background","blue");

    //ele:nth-of-type(n)是指父元素下第n个ele元素， 
    ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
    $("li:nth-child(2)").css("background","skyblue");
    $("li:nth-of-type(2)").css("background","pink");

    四、jQuery函数

    //jquery的html函数中如果传参数就将html中的值修改为参数;如果不传参数那么就获取html中的值
    $("#box").html("shide");
    //text()获取dom节点中的文本
    $("#box").text();
    //attr()获取和设置属性
    $("#box").attr("style","background:blue");
    //removeAttr()删除属性
    $("#box").removeAttr("style");
    //获取元素的个数
    $('div').size();

    $('div').addClass();
    $('div').removeClass();

    1.操作样式

    $("#btn").click(function(){
        $("#box").css("background","blue");
    });
        
    2.遍历dom节点

    //parents()它的父元素和祖先元素
    console.log($(".main").parents("div"));
    //它的孩子
    console.log($(".main").children());
    //find()
    console.log($(".main").find(".con").siblings());
    console.log($(".main").find(".con1").prev());
    console.log($(".main").find(".con").next());

    3.标签页
    

    
        
    • 首页
    
        
    • 我的
    
        
    • 设置
    
        
        
        
    
    
    
    

    4.插入dom节点
    

    
        
    • 首页
    
        
    • 我的
    
        
    • 设置
    
        
    
    
    
    

    5.删除元素
    $("").remove();
    $("").empty();

    6.替换元素
    $("").replaceAll($("目标元素"));
    $("目标元素").replaceWith($(""));

    这是一个按钮
    

    这是一段话

        
    
    

    7.克隆元素
    $("a").click(function() {
        alert("弹出")
    });

    $("a").clone(true).appendTo($("body"));

    8.js轮播图
    

    
    9.jquery轮播图