> For the complete documentation index, see [llms.txt](https://kvision.gitbook.io/kvision-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kvision.gitbook.io/kvision-guide/3.-optional-ui-functionality-via-modules/jquery-bindings.md).

# jQuery Bindings

The `kvision-jquery` module allows you to work with the [jQuery](https://jquery.com/) library.

## jQuery object

You can use the `io.kvision.jquery.jQuery` object to create a jQuery instance with all supported selector types. You can use them to directly access and modify underlying DOM elements and their attributes.

```kotlin
import io.kvision.jquery.invoke
import io.kvision.jquery.jQuery

jQuery("#ident").addClass("blue").show()
```

## getElementJQuery() method

The extension function `getElementJQuery()` can be used to access the jQuery instance bound to the underlying DOM element of the component. It gives you the possibility to easily access and modify the default behavior of KVision components.

{% hint style="info" %}
This method should only be called after the component has been rendered. It returns `null` otherwise. It's a good practice to overwrite `afterInsert` method from the `Widget` class in your own classes, and call `getElementJQuery()` from there. Alternatively you can use `addAfterInsertHook` method of the `Widget` class to wait until rendering is complete without the need to create your own class.
{% endhint %}

```kotlin
override fun afterInsert(node: VNode) {
    this.getElementJQuery()?.parent("#id")?.click { e ->
        console.log("clicked parent: ${e.clientX}, ${e.clientY}")
    }
}
```

There is also a `getElementJQueryD()` method which returns a value of `dynamic` type. It can be used to initialize and run code from external NodeJS modules and events to create custom KVision components.

```kotlin
override fun afterInsert(node: VNode) {
    getElementJQueryD()?.selectpicker("render").ajaxSelectPicker()
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://kvision.gitbook.io/kvision-guide/3.-optional-ui-functionality-via-modules/jquery-bindings.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.