Jquery基础总结

最新推荐文章于 2020-07-13 22:20:03 发布

程序员头不冷

最新推荐文章于 2020-07-13 22:20:03 发布

阅读量164

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_33473340/article/details/105457392

版权

选择器

层次选择器
a+b和a~b的区别
- JQuery中的**+(相邻兄弟选择器)代表选取a的紧邻**的是b标签的兄弟元素(单个)，没有b标签就不选中
```
      $(".div+span");//选取.div紧邻的span标签
```
- JQuery中的**~则代表选取a后面是b标签的所有兄弟标签**，不管是不是紧邻的，只要层级相同，父元素相同就选中
```
      $(".div~span");//选取.div同级的span标签
```
过滤选择器
- 简单过滤选择器
  - :first选取第一个出现的元素
```
$("#div span:first");//选取#div里第一个span标签
```
  - :last选取出现的最后一个元素
```
$("#div span:last");//选取#div里最后一个span标签
```
  - :even和**:odd**的区别
    - even是选取双，odd是选取单
```
$("#div span:even");//选取#div里索引为双span标签
$("#div span:odd"); //选取#div里索引为单span标签
```
  - :focus选取当前有焦点元素
```
$("#div input:focus");//选取#div里获得焦点的input标签
```
```
+ **:eq(index)**选取**索引**为index的元素**(索引从0开始)**

  ```javascript
    $("#div span:eq(5)");//选取#div里索引为5的span标签
```
- **:gt(index)**选取索引大于index的元素
```
  $("#div span:gt(3)");//选取#div里索引大于3的span标签
```
- **:lt(index)**选取索引小于index的元素
```
  $("#div span:lt(2)");//选取#div里索小于2的span标签
```
- :not(selector)选取不是selector外的元素
```
  $("#div span:not(:first)");//选取#div里不是第一个的所有span标签
```
- 内容过滤选择器
  - :contains(text)选取包含文本text的元素(注意有s)
```
$("#div span:contains('这是')");//选取#div里包含文本"这是"的span标签
```
  - **:has(selector)**选取内部元素包含selector选择器的元素
  如1、$(“div:has(#div)”).css(“background-color”, “black”);
  2、
  
  这个是选不中div的
  3、
  
  4、
  这样才行
  5、
```
+ **:empty**选取**没有子元素**或**不包含文本**的元素

```javascript
  $("#div span:empty");//选取#div里没有文本或子元素的span标签
```
- :parent选取包含子元素或含文本的元素
```
  $("#div span:parent");//选取#div里有文本或子元素的span标签
```
- 可见性过滤选择器
  - :hidden选取所有隐藏的元素
```
$("#div span:hidden");//选取#div里隐藏的span标签
```
  - :visible选取所有可见的元素
```
$("#div span:visible");//选取#div里可见的span标签
```
- 属性过滤选择器
  - **[attribute]**选取含有属性attribute的元素
```
$("#div span[class]");//选取#div里含有属性class的span标签
```
  - [attribute=value]选取含有特定属性值为value的元素
```
$("#div span[class='cc']");//选取#div里属性class='cc'的span标签
```
  - [attribute^=value]选取特定属性的值以value开头的元素(字符串匹配)
  - [attribute$=value]选取特定属性的值以value结尾的元素(字符串匹配)
  - [attribute=value]选取特定属性的值含有*value的元素(字符串匹配)
- 子元素过滤选择器
  - :first-child选取每个父元素的首个元素(只找第一个元素)
    - 与**:first区分开，:first是选取出现的第一个元素(从头往后找出现的**第一个元素)
  - :last-child选取每个父元素的最后一个元素(只找最后的一个元素)
  - :nth-child(n|odd|even)选取每个父元素中第n个元素或奇偶元素
- 表单对象属性过滤选择器(注意：jquery表单属性更改用prop)
  - :disabled选取表单不可用元素
  - :checked选取表单被选中的元素
- 表单选择器
  - :text选取所有文本框
  - :password选取所有密码框
  - :button选取所有按钮

基本操作

属性操作
- **attr(name)**获取属性为name的元素
- **attr(name, value)**更改元素的name属性值为value(value还可以是函数类型)
- **removeAttr(name)**删除属性name
- **prop(name)**获取属性为name的元素(多用于属性值为true/false)
样式操作
- addClass(name)为元素添加类样式(添加多个(name1 name2 name3))
- **removeClass(name)**删除元素类样式(删除多个(name1 name2 name3))
- **toggleClass(name, switch)**当元素存在类name样式时移除，不存在就添加，switch默认true，false表示不动态更改
- css({name : value, name : value})设置元素的样式属性name为value，其中value可以为function(index, value)，index为所选元素在jquery数组的位置，value为样式属性的值，链式写法为css(name, value).css(name, value)…
内容操作
- **html()**返回文本内容(包括子元素的标签)
- **html(content)**修改元素的内容，如果里面有子元素会被当成字符串改成content
- **html(function(index, oldHtmlCode))**执行函数，index表示元素所在jquery数组位置，oldHtmlCode表示当前元素修改前的文本内容
- text()返回纯文本内容(标签之间的文本)
- **text(content)**修改元素的内容，如果里面有子元素会被当成字符串改成content
- **val()**返回表单元素属性value的值，input type=text的value值是输入框的内容

事件

**$()**页面就绪化事件，不用等图片资源加载完毕执行，当dom元素加载完就可以执行
one(types, [data], func)****一次性事件，types为事件类型，data为额外数据，func为事件执行的函数
**toggle(speed)**切换元素的可见状态，speed是切换的时间
on(event, childNode, data, func)****推荐使用的事件处理方法，event为事件，多个用空格隔开，childNode代表添加到事件处理程序到这个子元素，data代表额外传递的数据，func是执行的函数
**off(event, selector)**与on对应的解绑方法，event是要解绑的事件，selector是选择器
**hover(inFunc, outFunc)**鼠标悬浮时间，鼠标移进触发inFunc函数，移除触发outFunc函数
**blur(func)**元素失去焦点执行func

文档处理

元素的创建

var newNode = $("<span>新节点</span>")，创建并返回新的节点

节点的插入(注意：当被添加的元素是页面中的DOM元素时是移动，不是复制)

一、内部插入(注意：内部的第一层的插入)

	1、方法：append()
		实例：$("#id").append(newNode);
	   	解释：将newNode添加到匹配元素的内部的尾部
	   	
	2、方法：appendTo()
	   	实例：newNode.appendTo($("#id"));
	   	解释：与append()方法一样只是被追加的元素和匹配的元素位置对调
	   	
	3、方法：prepend()
		实例：$("#id").prepend(newNode);
		解释：将newNode添加到匹配元素内部的头部(内部的第一层的头部插入)
		
	4、方法：prependTo()
		实例：newNode.prependTo($("#id"));
		解释：prepend()方法一样只是被追加的元素和匹配的元素位置对调

二、外部插入(注意：插入的元素和匹配的元素同级)

	1、方法：after()
		实例：$("#id").after(newNode);
		解释：将newNode添加到匹配元素的后面
	
	2、方法：insertAfter()
		实例：newNode.insertAfter($("#id"));
		解释：和after()一样，只是添加的元素和匹配的元素位置不一样
		
	3、方法：before()
    	实例：$("#id").before(newNode);
    	解释：在匹配元素之前插入内容
  	4、方法：insertBefore()
    	实例：newNode.insertBefore($("#id"));
    	解释：和before()一样，只是添加的元素和匹配的元素位置不一样

复制节点(注意：克隆所匹配元素包含了其子节点，文本节点，属性节点)

clone(boolean(可选), boolean(可选))

1、var cloned = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲button").clone(\dots$ ("#div"));


4. **删除节点**

+ **remove()**方法：删除**所匹配元素**(包括**子节点**)，并返回被删的元素(包括**子节点**)但**不包括绑定的事件**

```javascript
var removed = $("#div").prev().remove();

removed.insertAfter($("#div"));

detach()方法：和remove()一样，但是返回被删的元素包含绑定的事件和数据
```
var removed = $("#div").prev().detach();
removed.insertAfter($("#div"));
```
empty()方法：清空匹配的元素内容，包括子元素和文本内容，但不删除匹配的元素
```
$("#div").prev().empty();
```

包裹节点

wrap(element)方法：将所匹配的每个元素用element元素包裹起来
```
$("#div2").wrap("<div id='yes'></div>");
$("#div2").wrap($("#div"));
```
wrapAll(element)方法：将所匹配的元素用element整体包裹起来
wrapInner(element)方法：将所匹配的元素的子内容包含文本节点用elemen包裹起来
unwrap()方法：用于删除所匹配元素的父元素

遍历节点

祖先遍历
- parent(selector(可选))方法：返回所匹配元素的直接父元素
```
$("a").parent("#div2");//返回所有a元素的直接父元素的id为div2的元素
```
- parents(selector(可选))方法：返回所匹配元素的所有祖先元素
后代遍历
- children(selector(可选))方法：返回所匹配元素的直接子元素(注意：不是只有第一个子元素，是里面第一层的所有元素)
```
$("#div").children();
```
- find(selector)方法：返回所匹配元素里的后代元素
```
$("#div").find("a").length;
```
- **contents()**方法：返回所匹配元素的所有子元素(包括文本节点和注释节点)
```
var objs = $("#div").contents();
```
同胞遍历
- **siblings(selector(可选))**方法：返回所匹配元素的同胞元素(有相同父节点的元素)，不包括所匹配元素
```
$("#div2").find("span").siblings("button");
```
- next(selector(可选))方法：返回所匹配元素的紧邻的下一个元素
```
$("#div2").find("a").next().text();
```
- nextAll(selector(可选))方法：返回所匹配元素的所有紧随的同胞元素
```
$("#div2").find("span").eq(1).nextAll("button").text();
```
- nextUntil(selector)方法：返回所匹配元素和selector之间的同胞元素

节点过滤

**first()**方法：和:first-child一样，返回所匹配元素的第一个元素
**last()**方法：和:last-child一样，返回所匹配元素的最后一个元素
**eq(index)**方法：和:eq(index)一样，返回所匹配元素中指定索引位置的元素

**filter(selector|selector, selector…|JqueryObject|Dom|func)**方法:过滤元素，选择满足参数的元素

1、$("#div2").children().filter("span").css("color", "red");

2、$("#div2").children().filter("span, button").css("color", "red");

3、$("#div2").children().filter($("span")).css("color", "red");//效果和第一个一样

4、$("#div2").children().filter(document.getElementById("hed")).css("color", "red");

5、$("#div2").children().filter(function(index) {
    //将所匹配元素的子元素的下标输出
    console.log("下标：" + index);
    //当前元素包含一个span时，符合筛选条件
    return $("span", this).length == 1;
}).css("color", "red");

**not(selector|selector, selector…|JqueryObject|Dom|func)**方法:过滤元素，和filter()相反，选择满足参数之外的元素

JQuery动画效果

显示和隐藏
- **show(speed(可选), func(可选))**方法：所匹配元素的显示动画效果
  - speed：slow、normal、fast、毫秒，默认0
  - func：元素显示完成后执行的方法

**hide(speed(可选), func(可选))**方法：所匹配元素隐藏的动画效果(可用is(":hidden")判断)

滑上滑下
- **slideDown(speed(可选), easing(可选), func(可选))**方法：改变所匹配元素的高度(向下增大)动画效果
- **slideUp(speed(可选), easing(可选), func(可选))**方法：改变所匹配元素的高度(向上减小)动画效果

**slideToogle(speed(可选), easing(可选), func(可选))**方法：上下切换来改变所匹配元素的可见状态

淡入淡出
- **fadeIn(speed(可选), easing(可选), func(可选))**方法：淡入方式来显示被隐藏的元素
- **fadeOut(speed(可选), easing(可选), func(可选))**方法：淡出方式来隐藏元素
- **fadeToggle(speed(可选), easing(可选), func(可选))**方法：淡入淡出方式切换(淡出后不占据空间)

fadeTo和fadeToggle一样，只是淡出后占据空间

自定义动画

**animate(params, speed, func)**方法：自定义动画效果

$("#div3").animate({
    marginLeft:"+=20px",
    opacity:"0.4",
    width: "-=40px",
    height: "-=30px",
    widht:"toggle",//动态切换0~最大宽度
    height:"toggle"
}, "normal", function() {
    $("#div3").css("background-color", "#FA7E7E");
})

数组和对象操作

**each(function(index(可选), element(可选)))**方法：遍历所匹配的元素|遍历数组

//遍历所匹配的元素
$("#div2").children("span").each(function() {
    $(this).css("color", "red");
})

//遍历数组
$.each([1, 3, 5, 7, 9], function() {
    alert(this);
});

**$.extend()**方法：扩充属性自定义方法等

//自定义方法
$.extend({
    "myFunc":function() {
        alert("myFunc");
    }
});
$.myFunc();

$.merge(array1, array2)方法：用于将两个数组合并并返回
**$.unique()**方法：对DOM元素排序(文档的先后顺序)，并移除重复元素。注意：对数值和字符串数组过滤时，要先排序，否则无效
**$.parseJSON(data)**方法：用于将JSON字符串转为JSON对象

JQuery插件

封装全局函数插件

<script type="text/javascript">
    $(function() {
    //封装自定义的全局函数插件
    $.extend({
        "myFunc": function() {
            alert("myFunc");
        }
    });
    $("#button").on("click",
        function() {
        	//调用已定义的全局函数
        	$.myFunc();
    });
});
</script>

封装对象方法插件(用的多)

<script type="text/javascript">
    $(function() {
    //自定义对象方法功能
    $.fn.extend({
        check: function() {
            //插件内部的this表示jquery对象
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });
    $("#button").on("click",function() {
        $("input[type='checkbox']").check();
    });
    $("#button2").on("click",function() {
        $("input[type='checkbox']").uncheck();
    });
});
</script>

程序员头不冷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础总结

选择器层次选择器a+b和a~b的区别JQuery中的**+(相邻兄弟选择器)代表选取a的紧邻**的是b标签的兄弟元素(单个)，没有b标签就不选中 $(".div+span");//选取.div紧邻的span标签JQuery中的**~则代表选取a后面是b标签的所有兄弟标签**，不管是不是紧邻的，只要层级相同，父元素相同就选中 $(".div~span...
复制链接

扫一扫