jQuery学习01--基础知识

 

目录

 在菜鸟教程查看jQuery教程。

1.基础语法： $(selector).action()

      实例:

2.文档就绪事件

3.选择器

更多实例

4.jQuery HTML

（1）jQuery捕获

 5.jQuery 方法

（1）.css()

 （2） dbclick()；keyup()

---

 

写在前面：学习背景，LBS地图服务的需求，网上找了一段异步搜索代码，看不懂，需要补充基础知识了。代码片段如下。

$(function(){//==$(document).ready(function(){
            $('#search').val('');     //基础语法：$(selector).action()
            $(window).click(function(event) {
                $('.search_results').css('display','none');
            });
            $('#search, .search_results li').click(function(e) {
                e.stopPropagation();
            });
            $('#search').keyup(function(event) {
                event.stopPropagation();
                $.ajax({
                    url: "config/search_action.php",    //  请求路径
                    type: "post", //请求方式
                    data: $("form").serialize(),//请求参数
                    success: function(responseText,status,xhr){//异步执行成功执行的回调函数
                    
                    // console.log(responseText);
                        if (responseText != ''){
                            $('.search_results').css('display','block');//搜索框下拉
                            $('.search_results').html(responseText);//地图上打标志
                            console.log(responseText);
                        } else {
                            $('.search_results').html("<li>没有搜索到</li>");
                        }

                    }
                })
                .done(function() {
                    console.log("success");
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });;
            });
        });

 在菜鸟教程查看jQuery教程。

1.基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

      实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有 <p> 元素

• $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

• $("#test").hide() - 隐藏所有 id="test" 的元素

• $('#search').val()-返回id="search"的value属性的值,该方法返回第一个匹配元素的 value 属性的值。

2.文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

    // 开始写 jQuery 代码...

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

提示：简洁写法（与以上写法效果相同）:

$(function(){

    // 开始写 jQuery 代码...

});

3.选择器

（1）元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

（2）#id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

（3）.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

更多实例

$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例

4.jQuery HTML

（1）jQuery捕获

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所-选元素的-文本内容
• html() - 设置或返回所-选元素的-内容（包括 HTML 标记）
• val() - 设置或返回-表单字段的-值

设置内容 - text()、html() 以及 val()

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

 5.jQuery 方法

（1）.css()

css() 方法设置或返回被选元素的一个或多个样式属性。

$("p").css("background-color","yellow");

$('.search_results').css('display','block');

display 属性规定元素应该生成的框的类型。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。

 设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

 下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

（2） dbclick()；keyup()

当单击元素时，发生 click 事件。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

$(window).dblclick(function(event) {//搜索下拉框双击消失
    $('.search_results').css('display','none');
    alert("鼠标双击触发,HTML: " + $('.search_results').html());
});

与 keyup 事件相关的事件顺序：

1. keydown- 键按下的过程
2. keypass - 键被按下
3. keyup - 键被松开

当键盘键被松开时发生 keyup 事件。

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

$('#search').keyup(function(event) {
    event.stopPropagation();
    alert("键盘键松开触发,HTML: " + $('#search').val());
    $.ajax({});
});

6.一些语句区别

（1）document和window

简单来说，document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
所有的全局函数和对象都属于Window 对象的属性和方法。
document 对 Document 对象的只读引用。
区别:
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象