jQuery的常用方法总结_$element.find-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37862403/article/details/89335190

1.jQuery与DOM对象的转换

jQuery对象转换为DOM对象-----使用 jQuery的get(index) 方法，规定要获取哪个匹配的元素（通过 index 编号）。

var span = $('span').get(1)

DOM对象转换为jQuery对象---- 使用$(对象)将DOM对象包装

var span = document.getElementsByTagName(span)[1];

$(span);

2.函数的加载方式

$(function(){
   //do something 你的代码
});

$().ready(function(){
  // do something  你的代码
});

$(document).ready.function(){
    //do something 你的代码
});

3.获取对象内容

（1.文本内容---text()方法

$("element").text(); //返回文本内容，相当于取innerText

$("element").text("content"); //设置文本内容，相当于赋值给innerText

（2.html内容----html()方法

$("element").html(); //返回文本内容，相当于取innerHtml

$("element").html("content"); //设置文本内容，相当于赋值给innerHtml

（3.属性value ----val()方法通常与HTML表单元素一起使用

$("element").val(); //返回第一个匹配元素的 value 属性的值

$("element").val("content"); //设置所有匹配元素的 value 属性的值。

4. 样式的操作方法

1.addClass()方法向被选元素添加一个或多个类名，如需添加多个类，请使用空格分隔类名。

语法：$("element").addClass(classname, function(index, currentclass));

$("element").addClass("black");

$("element").addClass("black blue");

$("element").addClass("black"， function() {
return 'col-md-' + $(this).index();
})；

2. removeClass() 方法从被选元素移除一个或多个类。

语法：$("element").removeClass(classname, function(index, currentclass));

3.hasClass() 方法检查被选元素是否包含指定的类名称。

语法：$("element").hasClass(classname);

4.css()方法设置 css 属性

语法：$("element").css(name,value);

$("element").css("color"); // 获取属性值

$("element").css("color", "blue"); //设置属性

$("element").css({
"color": "blue",
"backgroound": "white"
}); // 设置多个属性

5.查找与遍历中的方法

1.get()方法获取由选择器指定的 DOM 元素。

$("element").get(index); // 通过 index 编号规定要获取哪个匹配的元素。

2.parent() 方法返回被选元素的直接父元素。

$("element").parent();

3.parents() 方法返回被选元素的所有祖先元素。

$("element").parents();

4. children() 方法返回被选元素的所有直接子元素。

$("element").children();

5. find() 方法返回被选元素的后代元素。

$("element").find();

6.eq() 方法返回带有被选元素的指定索引号的元素。

$("element").eq(index); // index：从 0 开始计算，-index：从最后一个元素开始倒数

7.siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

$("element").siblings();

8.index() 方法返回指定元素相对于其他指定元素的 index 位置。

$("element").index(); // 获取当前元素的index值

9. 获取当前元素之前的一个prev() / 所有prevAll()元素。

$("element").prev();

$("element").prevAll();

10.获取当前元素之后的一个next() / 所有nextAll()元素。

$("element").next();

$("element").nextAll();

11.显示，隐藏，切换方法

下列方法的括号中可加（speed,easing,function)作为参数。

speed	可选。规定显示效果的速度。
easing	可选。规定在动画的不同点上元素的速度。默认值为 "swing"。
function	可选。show() 方法执行完之后，要执行的函数。

1）显示

$("element").show();
$("element").slideDown(); // 滑入
$("element").fadeIn(); // 淡入

2）隐藏

$("element").hide();
$("element").slideUp(); // 滑出
$("element").fadeOut(); // 淡出

3）切换

$("element").toggle();
$("element").slideToggle();
$("element").fadeToggle();

12.attr() 方法设置或返回被选元素的属性和值。

$("element").attr(attribute)； //返回元素属性的值：

$("element").attr(attribute，value)； //设置元素属性的值；

$("element").attr({attribute1:value1, attribute2:value2, attribute3:value3...}); 设置多个属性和值

13.on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

$("element").on(event, childelement, data, function);

$("element").on('click', function() {
    // 绑定某一个事件
});

$("ul").on('click', 'li', function() {
    // 利用事件委托给动态元素绑定事件
});

14.bind()方法绑定多个不同事件类型，但不能为动态元素绑定事件

$("element").bind({
    click: function() {
        // 鼠标单击事件
    },
    mouseover: function() {
        // 鼠标移入事件
    },
    mouseout: function() {
        // 鼠标移出事件
    }   
})

15. load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$("element").load(URL,data,callback); //必需的URL参数规定您希望加载的 URL. callback参数是 load() 方法完成后所执行的函数名称。

6. Ajax :载入远程 HTML 文件代码并插入至 DOM 中

语法：

$.ajax({name1: value1, name2: value2, name3: value3, ......}); //AJAX 请求的一个或多个名称-值对。

$.ajax({
    url: "www.mycsdn.com/",
    async:false,
    type: "POST",
    dataType: "json",
    data: {
        "id": 10,
        "sex": 1,
        "age": 25
    },
    beforeSend: function(mystr) {
        mystr.setRequestHeader('Content-Type', 'text/html;charset=utf8')
    },
    dataFilter: function(data, type) {
        return data
    },
    success: function(json) {
        console.log(json);
    },
    error: function(err) {
        console.log("请求失败");
    }
})