day4——JQuery

jQuery介绍

什么是jquery

js的函数库，封装（兼容性比较好）

使用jquery

• 1.到jquery官网下载
• 产品（线上环境）：压缩版；开发：未压缩
• 2.cdn(内容分发网络）

1.jQuery语法

$(selector).action()

$: 核心, jQuery单词简写形式

Selector: 选择器

Action:动作(html,css,事件)

2.选择器

1)基本选择器

• Id选择器 $(“#id”)
• 类选择器 $(“.class”)
• 标签选择器: $(“标签名称”)
• 通配选择器 $(“*”)

2)层级选择器

• 后代选择器 $(“p span”)
• 并集 $(“p,span”)
• 交集 $(“p.red”)

3)属性选择器

$(“[name=’username’]”)

4)基本筛选器

console.log($("tr:first"));
            console.log($("tr:last"));
            console.log($("tr:eq(1)"));   //=
            console.log($("tr:lt(1)"));   //<
            console.log($("tr:gt(1)"));   //>
            console.log($("tr:even"));   //偶数
            console.log($("tr:odd"));    //奇数

3.jQuery操作

1)html的内容

console.log($(“#div1”).html()); 获取值

$(“#div1”).html(“bbbb”); 设置值

2)属性操作

console.log($(“#div1”).attr(“class”)); 获取属性值

$(“#div1”).attr(“name”,”green”); 设置属性值

Prop():获取和设置属性值

获取和修改value

$("input").val("aaaaa");
console.log($("input").val());

3)样式修改

$(“#div1”).css({“color”:”red”,”background”:”black”,”font-size”:”20px”});

4.事件

Onclick====click()

//原生方法
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function(){

            }
//jQuery方法
            $("#btn").click(function(){

            });