关于jQuery和AJAX的解析

最新推荐文章于 2023-06-22 22:06:58 发布

人圭先生

最新推荐文章于 2023-06-22 22:06:58 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/sinat_15274667/article/details/51475744

版权

java 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

jQuery可以说是一个轻量级的JavaScript库。其中jQuery提供的对象都是jQuerytey特有的，大部分方法返回值也是jQuery对象，所以jQuery方法可以连续调用jQuery对象.方法().方法()…..”

觉得还是先说说什么是DOM对象，什么是jQuery对象，然后在详细看他们的解析最好不过了，要不总是迷迷糊糊！！！

DOM对象，其实说的就是我们用传统的方式获得的对象，就是JavaScript获取的对象，所以说DOM对象能使用JavaScript固有的方法，而不能使用jQuery里的方法。

而jQuery对象是用jQuery类库的选择器获得的对象，它是jQuery独有的，它可以使用jQuery里的方法，而不能使用DOM方法。

例如

$ ("#id").innerHTML 和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的 jQuery方法来代替。

比如看下面代码解释：

var domObj=document.getElementById("id");//这种方式获取的就是DOM对象
var $obj=$("#id");//这种方法获取的就是jQuery对象

DOM对象转换为jQuery对象

就用这个：$(DOM对象)

function f(){
    var obj=document.getElementById("d1");
    //DOM对象----->jQuery对象
    var $obj=$(obj);
    $obj.html('hello jQuery');
}

jQuery对象转换为DOM对象

$obj.get() 或者$ obj.get()[0]

function f(){
    var $obj=$('#d1');
    //jQuery对象--->DOM对象
    var obj=$(obj).get(0);
    obj.innerHTML='hello jQuery';
}

jQuery选择器

jQuery选择器就是类似于css选择，对元素记性定位，利用选择器就可以使得内容和行为进行分离，比如样式是样式，逻辑是逻辑。
比如：

<body>
    <div id="id1" class="class1">Hello jQuery</div>
</body>

----------------------------
//根据id定位元素
function f(){
    $(#id1).css('font-size','30px');
}
//根据class属性定位元素
function f1(){
    $('.class1').css('font-size','30px');
}
//根据选择器或者元素选择器，根据html标记来区分
function f2(){
    $('div').css('font-size','30px');
}

//当然也可以将所有的选择器集合起来
function f3(){
    $('#id1,.class1,div').css('font-size','30px');
}

**上面都是基本选择器，现在来说说层次选择器
，这个属于比较重要的了。**

<div id="d1">
    <div id="d2">hello</div>
    <div class="s1">jQuery</div>
    <p>空白格</p>
</div>

对上面的HTML代码进行选择

select1 空格 select2

//根据select1找到节点后，再寻找子节点中符合select2的节点
function f(){
    $('#d1' div).css('font-size','30px');
}

select1>select2

//直接查找直接子节点，不查找间接子节点
function f(){
    $('#d1>div').css('font-size','30px');
}

######select1+select2

+表示下一个兄弟节点

function f(){
    $('#d1+div').css('font-size','30px');
}

select1~select2

~代表下面的所有兄弟

function f(){
    $('#d2~div').css('font-size','30px');
}

内容过滤选择器

contains(text) 匹配包含给定文本的元素
empty 匹配所有不包含子元素或文本的空元素
has(selected) 匹配含有选择器所匹配的元素
parent 匹配含有子元素或者文本的元素

可见性过滤选择器

:hidden 匹配所有不可见元素,或type为hidden的元素
:visible 匹配所有可见元素

<div>hello jQuery</div>
<div style="display:none;">hello jQuery</div>

function f(){
    $('div:hidden').css('display','block');
    $('div:hidden').show(normal);
    $('div:visible').hidden(800);
}

jQuery操作DOM之—-创建、删除、插入

1.创建一个div,并加在body的最后一个节点。

var $obj=$('<div>hello jQuery</div>');
$('body').append($obj);

//简写
$('body').append('<div>hello jQuery</div>');

插入DOM节点

append() 作为最后一个子节点插入进来
prepend() 作为第一个子节点插入进来
after() 作为下一个兄弟节点插入进来
before()　作为上一个兄弟节点插入进来

删除DOM节点

remove() 移除
remove(selector) 按选择器定位后删除
empty() 清空节点

复制DOM节点

clone()
clone(true) 复制的节点具有过行为，也就是说将处理代码一块复制了。

人圭先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于jQuery和AJAX的解析

jQuery可以说是一个轻量级的JavaScript库。其中jQuery提供的对象都是jQuerytey特有的，大部分方法返回值也是jQuery对象，所以jQuery方法可以连续调用jQuery对象.方法().方法()…..”觉得还是先说说什么是DOM对象，什么是jQuery对象，然后在详细看他们的解析最好不过了，要不总是迷迷糊糊！！！DOM对象，其实说的就是我们用传统的方式获得的对象，就是Java
复制链接

扫一扫