什么是JQuery,用JQuery找对象

一.什么是jQuery
它是一个轻量级的javascript类库
二.jQuery的优点
(1)兼容浏览器
(2)总是面向集合
(3)多行操作集于一行

三.写jQuery步骤
(1)导入js类库(https://download.csdn.net/download/qq_40868408/10640172)
(2)jQuery程序入口
( d o c u m e n t ) . r e a d y ( f n ) ; (fn);

四.jQuery选择器
作用:找对象
//元素选择器

(function(){ ("a").hide(); ( " i n p u t " ) . h i d e ( ) ; ("button").hide(); $("div").hide(); });

//属性选择器

(function(){ ("[href]").hide(); ( " [ t y p e ] " ) . h i d e ( ) ; ("[href='a1']").hide(); $("[href='a3']").hide(); }

//id选择器

(function(){ ("#div1").hide(); }

//类选择器

(function(){ (".button1").hide(); }

//包含选择器

(function(){ ("a.c_a1").hide(); }

//组合选择器

(function(){ (".c_a1,.c_a2").hide(); }

//自定义选择器

(function(){ ("a","div").hide(); }

//匹配选择器

(function(){ ("a:eq(1)").hide();//选择tr标签中下标为1的对象 ( " a : g t ( 1 ) " ) . h i d e ( ) ; ("a:lt(2)").hide(); }

$(“tr:even”) //选择tr标签中下标为偶数的对象,从0开始

五. jQuery(html)
html:基于html的一个字符串。

(function(){ (“#button2”). click(function(){

$("<h1>辉煌</h1>").append("#button2");


});

});

  1. jQuery属性写法
    (1)无参数:
    $(“p”).text();

(2)参数val:

$("p").text("Hello world!");

(3)回调函数:

$("p").text(function(n){
                return "这个 p 元素的 index 是:" + n;
        });

(4)参数

        $("img").attr({
            src: "test.jpg",
            alt: "Test Image"
        });

jQuery事件写法:

(“p”).click(function(){ (this).hide();
});

console对象
console.log(“文字”); 输出普通信息
console.dir(); 显示一个对象所有的属性和方法console.dirxml(); 显示网页的某个节点(node)所包含的html/xml代码

属性
$(‘input’).val();//返回该元素的值了

$(‘p’).text();//返回p元素的文本内容。

$(“p”).text(“Hello world!”);//设置所有 p 元素的文本内容

( p ) . a d d C l a s s ( s e l e c t e d ) ; / / s e l e c t e d (“p”).addClass(“selected1 selected2”);

$(“p”).removeClass(“selected”);//从匹配的元素中删除 ‘selected’ 类

$(“p”).toggleClass(“selected”);//为匹配的元素切换 ‘selected’ 类

$(“p”).css(“color”);//取得第一个段落的color样式属性的值。

$(“p”).append(“Hello“);//追加一些HTML标记在p标签后

$(‘li’).first()//获取匹配的第一个元素的li标签

$(‘li’).last()//获取匹配的最后一个元素li标签

这里写代码片

猜你喜欢

转载自blog.csdn.net/qq_40868408/article/details/82286244