• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

一篇文章带你入门和了解Jquery的基础操作

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.Jquery的使用步骤:

(1)导入js库

<script src="js/jquery-1.11.3.min.js"></script>​
//js/jquery-1.11.3.min.js   压缩版(推荐)
//js/jquery-1.11.3.js       完整版

(2)页面载入事件

$(document).ready(function(){
    业务操作 ;
});​
//优化后:
$(function(){
    业务操作;
});

2.Jq对象和js对象的转换

(1)js对象------>jq对象

var js对象 = document.getElementById("id属性值");
var $jq对象 = $(js对象)

(2)jq对象------>js对象

var js对象 = $jq对象.get(index) ;

3.jq的基本选择器

//(1)jq的id选择器

$("#id属性值").绑定事件方法(function(){
    业务操作 ;
});

//(2)jq的class选择器

$("#.class属性值").绑定事件方法(function(){
    业务操作 ;
});

//(3)表单选择器

$("选中的input标签[带指定属性的标签]").绑定事件方法(function(){
    业务操作 ;
});

//(4)element选择器

$("元素/标签").html("XXX") ;

4.jq的层级选择器

//后代选择器
$("父标签 子标签")
​
//子元素选择器
$("父元素>子元素")

5.过滤选择器

$("标签:first")               //匹配的是第一个标签
$("标签:even")                //匹配的是从0开始的偶数个标签(0,2,4...)
$("标签:odd")                 //匹配的是从1开始的奇数个元素(1,3,5...)

6.属性选择器

[attribute]                 //匹配的是当前给定的属性的元素
[attribute=value]           //匹配的是给定的属性是某个特定值的元素
[attribute!=value]          //匹配所有不含有指定元素的属性,或属性不等于特定值的元素
[attribute^=value]          //匹配的是以指定元素开始的特定的元素
[attribute$=value]          //匹配以指定元素结尾
[attribute*=value]          //匹配给定的属性是以包含某些值的元素
[selector1][selector2]...[selectorN]
    //符合属性选择器.同时满足多个属性条件的元素

7.jq文档处理

//追加
append(content)             //向每个匹配的元素内部追加内容(推荐)
jq对象.appendTo(comtent)      //把匹配的内容追加到另一个指定元素集合中​
//前置
prepend(content)            //把每个匹配的元素放到content前面去
prependTo(content)          //把所有匹配的元素前置到另一个指定的元素集合中​
//插入
after(content|fn)           //在每个匹配的元素之后插入内容
insertAfter(content)        //将匹配的元素插入到content后面去
before(content)             //将每个匹配的元素之前插入内容
insetBefore(content)        //将每个匹配的元素插入到content之前

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript基础之对象发布时间:2022-02-05
下一篇:
Vue 搭建Vuex环境详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap